Add HeroBanner for Election depending on the current state of the ballot

src/components/election/CandidateCard.vue

@@ -20,6 +20,7 @@ const store = useStore();
 const session = useSession();
 
 const isVotingOpen = computed(() => store.getters['ballot/isVotingOpen']);
+const isVotingClosed = computed(() => store.getters['ballot/isVotingClosed']);
 
 const router = useRouter();
 const route = useRoute();

src/components/hero/ElectionHero.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import CandidateCard from '@/components/election/CandidateCard.vue';
+
+const store = useStore();
+
+const isNominationOpen = computed(
+  () => store.getters['ballot/isNominationOpen']
+);
+const isVotingOpen = computed(() => store.getters['ballot/isVotingOpen']);
+const isVotingClosed = computed(() => store.getters['ballot/isVotingClosed']);
+
+const candidatesSorted = computed(
+  () => store.getters['ballot/candidatesSorted']
+);
+
+const content = {
+  isNominationOpen: {
+    headline: 'Nominate Now!',
+    subline: 'Engage in WAX governance by nominating your top candidate.'
+  },
+  isVotingOpen: {
+    headline: 'Cast Your Vote!',
+    subline:
+      'Shape the future of WAX through blockchain governance. Your voice matters!'
+  },
+  isVotingClosed: {
+    headline: 'Winner Announced!',
+    subline: 'The election has concluded. A new IG has been elected - Exciting times ahead!'
+  }
+};
+</script>
+
+<template>
+  <div class="container">
+    <div class="container grid grid-cols-5 gap-12 bg-primary-50 py-12 sm:py-16">
+      <div class="col-span-3">
+        <template v-if="isNominationOpen">
+          <h2 class="text-2xl font-bold tracking-tight text-primary">
+            {{ content.isNominationOpen.headline }}
+          </h2>
+          <p
+            class="mt-4 text-md max-w-2xl leading-8"
+            v-html="content.isNominationOpen.subline"
+          ></p>
+        </template>
+        <template v-if="isVotingOpen">
+          <h2 class="text-2xl font-bold tracking-tight text-primary">
+            {{ content.isVotingOpen.headline }}
+          </h2>
+          <p
+            class="mt-4 text-md max-w-2xl leading-8"
+            v-html="content.isVotingOpen.subline"
+          ></p>
+        </template>
+        <template v-if="isVotingClosed">
+          <h2 class="text-2xl font-bold tracking-tight text-primary">
+            {{ content.isVotingClosed.headline }}
+          </h2>
+          <p
+            class="mt-4 text-md max-w-2xl leading-8"
+            v-html="content.isVotingClosed.subline"
+          ></p>
+        </template>
+      </div>
+      <div v-if="isVotingClosed" class="col-span-2">
+        <template v-if="isVotingClosed && candidatesSorted.length">
+          <CandidateCard
+            class="transform rotate-[5deg] max-w-[250px]"
+            :candidate="candidatesSorted[0]"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

src/store/modules/ballot.js

@@ -27,6 +27,9 @@ const getters = {
   candidates: (state) => {
     return state.candidates;
   },
+  candidatesSorted: (state) => {
+    return state.candidates.sort((a, b) => b.votesRaw - a.votesRaw);
+  },
   ballots: (state) => {
     return state.ballots;
   },
@@ -77,11 +80,12 @@ const actions = {
         votingBallots.forEach((votes) => {
           let voteToCurrency = parseFloat(votes.value.split(' ')[0])
             .toFixed(2)
-            .replace(/\d(?=(\d{3})+\.)/g, '$&,')
+            .replace(/\d(?=(\d{3})+\.)/g, '$&,');
 
           if (votes.key === candidate.owner) {
             candidatesWithVotes.push({
               ...candidate,
+              votesRaw: parseInt(votes.value.split(' ')[0]),
               votes: voteToCurrency + ' WAX'
             });
           }

src/views/ElectionView.vue

@@ -1,13 +1,9 @@
 <script setup>
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
-import SimpleHero from '../components/hero/SimpleHero.vue';
+import ElectionHero from '../components/hero/ElectionHero.vue';
 import { shallowRef, defineAsyncComponent } from 'vue';
 import { RouterView } from 'vue-router';
 
-const headline = 'Cast your Vote!';
-const subline =
-  'Cast your vote and get engaged in blockchain governance. Have your voice heard in shaping the future of WAX.';
-
 const tabs = shallowRef({
   Election: defineAsyncComponent(() =>
     import('../components/election/BallotView.vue')
@@ -19,7 +15,7 @@ const tabs = shallowRef({
 </script>
 
 <template>
-  <SimpleHero :title="headline" :desc="subline" />
+  <ElectionHero />
 
   <div class="container pt-12 pb-16">
     <TabGroup>