refactor: migrate Home view

src/views/HomeView.vue

@@ -1,5 +1,19 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { isWarnKey, nsfwKey, showModalKey } from "@/keys";
+import RefToggle from "@/components/RefToggle.vue";
+import RefModal from "@/components/RefModal.vue";
+import WelcomeHeader from "@/components/WelcomeHeader.vue";
+import ButtonGroup from "@/components/ButtonGroup.vue";
+import Button from "@/components/RefButton.vue";
+
+const isNsfw = inject<boolean>(nsfwKey, false);
+const isWarn = inject<boolean>(isWarnKey, false);
+const showModal = inject<Function>(showModalKey, Function);
+</script>
+
 <template>
-  <nsfw-warning v-show="$root.isWarn">
+  <RefModal v-show="isWarn">
     <template #heading>
       ⚠️⚠️⚠️<br />
       Whoa, Nelly!
@@ -12,14 +26,14 @@
 
     <template #yes>Yes, show me the goods 👀</template>
     <template #no>NO, STAHP 😱</template>
-  </nsfw-warning>
+  </RefModal>
 
-  <prose>
+  <WelcomeHeader>
-    <welcome>
     <template #main>Sebin Nyshkim</template>
     <template #sub>Character Reference Page</template>
-    </welcome>
+  </WelcomeHeader>
 
+  <section>
     <h3>Welcome to Sebin's Ref Page</h3>
     <p>
       On this page your can learn all about Sebin, your friendly neighborhood
@@ -33,17 +47,17 @@
       feel free to reach out!
     </p>
 
-    <ul>
+    <ul class="social">
-      <li>
+      <li class="twitter">
         <a href="https://twitter.com/SebinNyshkim">Twitter</a>
       </li>
-      <li>
+      <li class="mastodon">
         <a href="https://meow.social/@SebinNyshkim" rel="me">Mastodon</a>
       </li>
-      <li>
+      <li class="telegram">
         <a href="https://t.me/SebinNyshkim">Telegram</a>
       </li>
-      <li>
+      <li class="furaffinity">
         <a href="https://www.furaffinity.net/user/sonofdragons">
           Fur Affinity
         </a>
@@ -58,52 +72,23 @@
     </blockquote>
 
     <h3>Complete Ref Sheet</h3>
-    <p>Just here to fetch the ref sheet?</p>
+    <p>
+      Just here to fetch the ref sheet? Click the button with the ref sheet you
+      need and get started!
+    </p>
 
-    <div class="btn-group flex flex--row flex--wrap">
+    <ButtonGroup>
-      <btn href="/sebin-ref-full-SFW-hires.jpg">
+      <Button href="./sebin-ref-full-SFW-hires.jpg">
-        Download <span v-if="$root.nsfw">SFW</span> Refsheet (10 MB) ⬇️
+        <template v-if="isNsfw">SFW</template> Refsheet (3,3 MB) ⬇️
-      </btn>
+      </Button>
-      <btn v-if="$root.nsfw" href="/sebin-ref-full-NSFW-hires.jpg">
+      <Button v-if="isNsfw" href="./sebin-ref-full-NSFW-hires.jpg">
-        Download NSFW Refsheet (10,2 MB) ⬇️
+        NSFW Refsheet (3,4 MB) ⬇️
-      </btn>
+      </Button>
-    </div>
+    </ButtonGroup>
 
-    <nsfw-switch
+    <RefToggle id="nsfw-home" v-model="isNsfw" @click.prevent="showModal()">
-      id="nsfw-switch"
+      <template #off>😇</template>
-      v-model="$root.nsfw"
+      <template #on>😈</template>
-      @change="$root.showWarning()"
+    </RefToggle>
-    />
+  </section>
-  </prose>
 </template>
-
-<script>
-import Prose from "@/components/Prose.vue";
-import Welcome from "@/components/Welcome.vue";
-import btn from "@/components/Button.vue";
-import NsfwSwitch from "@/components/NsfwSwitch.vue";
-import NsfwWarning from "@/components/NsfwWarning.vue";
-
-export default {
-  name: "Home",
-  components: { Prose, Welcome, btn, NsfwSwitch, NsfwWarning },
-};
-</script>
-
-<style lang="scss">
-@import "@/scss/_mixins.scss";
-
-.btn-group {
-  justify-content: space-evenly;
-
-  .btn {
-    flex: 1 0 100%;
-
-    margin: 1em 0;
-
-    @include mq-desktop {
-      flex: 0 0 auto;
-    }
-  }
-}
-</style>