From f1cb1bbfbdd6803ff16af28fa984fcce6244e84b Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 21 Dec 2020 18:33:17 +0100
Subject: [PATCH] feat: :recycle: use slots in NSFW warning

---
 src/App.vue                    | 15 ++++++++++++++-
 src/components/NsfwWarning.vue | 11 ++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 32a07cf..774a2d1 100644
--- a/src/App.vue
+++ b/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"
diff --git a/src/components/NsfwWarning.vue b/src/components/NsfwWarning.vue
index 8bca139..3800632 100644
--- a/src/components/NsfwWarning.vue
+++ b/src/components/NsfwWarning.vue
@@ -3,18 +3,15 @@
     <div class="nsfw-warning__background"></div>
     <div class="nsfw-warning__message">
       <div>
-        <h2>⚠️ Whoa, Nelly! ⚠️</h2>
-        <p>
-          By enabling NSFW mode you confirm that you are of legal age to view
-          adult content.
-        </p>
+        <h2><slot name="heading"></slot></h2>
+        <p><slot name="message"></slot></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>