feat: ✨ add NSFW switch and warning to front page for ref sheet download buttons

src/views/Home.vue

@@ -1,4 +1,19 @@
 <template>
+  <nsfw-warning v-show="$root.isWarn">
+    <template #heading>
+      ⚠️⚠️⚠️<br />
+      Whoa, Nelly!
+    </template>
+
+    <template #message>
+      By enabling NSFW mode you confirm that you are of legal age to view adult
+      content.
+    </template>
+
+    <template #yes>Yes, show me the goods 👀</template>
+    <template #no>NO, STAHP 😱</template>
+  </nsfw-warning>
+
   <prose>
     <welcome>
       <template #main>Sebin Nyshkim</template>
@@ -40,16 +55,22 @@
     </blockquote>
 
     <h3>Complete Ref Sheet</h3>
-    <p>Just here to fetch the ref sheet? Select one of two:</p>
+    <p>Just here to fetch the ref sheet?</p>
 
     <div class="btn-group flex flex--row flex--wrap">
       <btn href="/sebin-ref-full-SFW-hires.jpg">
-        Download SFW Refsheet (10 MB) ⬇️
+        Download <span v-if="$root.nsfw">SFW</span> Refsheet (10 MB) ⬇️
       </btn>
-      <btn href="/sebin-ref-full-NSFW-hires.jpg">
+      <btn v-if="$root.nsfw" href="/sebin-ref-full-NSFW-hires.jpg">
         Download NSFW Refsheet (10,2 MB) ⬇️
       </btn>
     </div>
+
+    <nsfw-switch
+      id="nsfw-switch"
+      v-model="$root.nsfw"
+      @change="$root.showWarning()"
+    />
   </prose>
 </template>
 
@@ -57,10 +78,12 @@
 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 },
+  components: { Prose, Welcome, btn, NsfwSwitch, NsfwWarning },
 };
 </script>