feat: ✨ add NSFW confirm alert

src/App.vue

@@ -1,5 +1,7 @@
 <template>
   <div id="app">
+    <nsfw-warning v-show="isWarn"></nsfw-warning>
+
     <ref-header
       mainHeading="Sebin Nyshkim"
       subHeading="Character Reference Page"
@@ -189,14 +191,23 @@
 
         <h3>Additional Muscle References</h3>
         <div class="prose" v-show="!nsfw">
-          <p class="nsfw-bar">
-            <strong>
-              Some of these additional references are NSFW. Click
-              <a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW
-              mode.
-            </strong>
-          </p>
+          <div class="nsfw-bar">
+            <div class="nsfw-bar__content flex flex--row flex--nowrap">
+              <div>
+                <strong>
+                  Some of these additional references are NSFW. Please enable
+                  NSFW mode to reveal them.
+                </strong>
+              </div>
+              <nsfw-switch
+                id="nsfw-switch-muscle"
+                v-model="nsfw"
+                @change="showWarning()"
+              />
+            </div>
+          </div>
         </div>
+
         <gallery v-show="nsfw">
           <ul>
             <li>
@@ -628,6 +639,8 @@ import Gallery from "@components/Gallery.vue";
 import RefFigure from "@components/Figure.vue";
 import RefHeader from "@components/Header.vue";
 import RefFooter from "@components/Footer.vue";
+import NsfwSwitch from "@components/NsfwSwitch.vue";
+import NsfwWarning from "@components/NsfwWarning.vue";
 
 import Sebin from "@mixins/Sebin.js";
 import Helper from "@mixins/Helper.js";
@@ -640,15 +653,30 @@ export default {
     Gallery,
     RefFigure,
     RefHeader,
-    RefFooter
+    RefFooter,
+    NsfwSwitch,
+    NsfwWarning
   },
   data() {
     return {
       nsfw: false,
+      isWarn: false,
+      isConfirmedHorny: false,
       version: require("../package.json").version
     };
   },
-  mixins: [Sebin, Helper]
+  mixins: [Sebin, Helper],
+  methods: {
+    showWarning() {
+      if (!this.isConfirmedHorny) {
+        this.isWarn = true;
+
+        setTimeout(() => {
+          this.nsfw = false;
+        }, 1);
+      }
+    }
+  }
 };
 </script>