feat: ♻️ use slots in NSFW warning

src/App.vue

@@ -1,6 +1,19 @@
 <template>
   <div id="app">
-    <nsfw-warning v-show="isWarn"></nsfw-warning>
+    <nsfw-warning v-show="isWarn">
+      <template v-slot:heading>
+        ⚠️⚠️⚠️<br />
+        Whoa, Nelly!
+      </template>
+
+      <template v-slot:message>
+        By enabling NSFW mode you confirm that you are of legal age to view
+        adult content.
+      </template>
+
+      <template v-slot:yes>Yes, show me the goods 👀</template>
+      <template v-slot:no>NO, STAHP 😱</template>
+    </nsfw-warning>
 
     <ref-header
       mainHeading="Sebin Nyshkim"

src/components/NsfwWarning.vue

@@ -3,18 +3,15 @@
     <div class="nsfw-warning__background"></div>
     <div class="nsfw-warning__message">
       <div>
-        <h2>⚠️ Whoa, Nelly! ⚠️</h2>
+        <h2><slot name="heading"></slot></h2>
-        <p>
+        <p><slot name="message"></slot></p>
-          By enabling NSFW mode you confirm that you are of legal age to view
-          adult content.
-        </p>
 
         <div class="btn-container">
           <a href="#" class="btn positive" @click.prevent="confirmNsfw(true)">
-            Yes, show me the goods 👀
+            <slot name="yes"></slot>
           </a>
           <a href="#" class="btn negative" @click.prevent="confirmNsfw(false)">
-            NO, STAHP 😱
+            <slot name="no"></slot>
           </a>
         </div>
       </div>