feat: InfoLabel component

nuxt-themes · May 21, 2021 · c6d7ef0 · c6d7ef0
1 parent b5638cc
commit c6d7ef0
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 43 deletions.
diff --git a/playground/components/Page.vue b/playground/components/Page.vue
@@ -37,7 +37,7 @@
               "
               >Draft</span
             >
-            <DBadge v-if="page.badge" class="font-medium">{{ page.badge }}</DBadge>
+            <Badge v-if="page.badge" class="font-medium">{{ page.badge }}</Badge>
           </div>
           <p v-if="page.description" class="mt-4 text-lg text-gray-600 dark:text-gray-300">{{ page.description }}</p>
         </section>

diff --git a/src/defaultTheme/components/atoms/InfoLabel.vue b/src/defaultTheme/components/atoms/InfoLabel.vue
@@ -0,0 +1,32 @@
+<template>
+  <span
+    class="
+      text-xs text-primary-500
+      px-2.5
+      py-1.5
+      leading-none
+      rounded
+      font-semibold
+      uppercase
+      tracking-wide
+      bg-primary-100
+      dark:bg-primary-900
+      dark:text-primary-400
+    "
+  >
+    {{ label }}
+  </span>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/organisms/PreLaunchHero.vue b/src/defaultTheme/components/organisms/PreLaunchHero.vue
@@ -2,26 +2,7 @@
   <section class="flex flex-col md:flex-row d-container-content py-12 md:py-24">
     <div class="w-full md:w-1/2 flex flex-col justify-center mb-8 md:mb-0">
       <div class="flex flex-col items-center md:items-start mb-2">
-        <span
-          class="
-            mx-2
-            text-xs
-            mb-4
-            text-primary-500
-            px-2.5
-            py-1.5
-            leading-none
-            rounded
-            font-semibold
-            uppercase
-            tracking-wide
-            bg-primary-100
-            dark:bg-primary-900
-            dark:text-primary-400
-          "
-        >
-          🚀 Coming Soon
-        </span>
+        <InfoLabel label="🚀 Coming Soon" class="mx-2 mb-4" />
         <h2
           class="
             mb-2

diff --git a/src/defaultTheme/components/organisms/PricingGrid.vue b/src/defaultTheme/components/organisms/PricingGrid.vue
@@ -9,29 +9,11 @@
             : 'border-gray-200 dark:border-gray-700'
         ]"
       >
-        <span
+        <InfoLabel
           v-if="tier.preSelected"
-          class="
-            absolute
-            top-0
-            left-1/2
-            transform
-            -translate-x-1/2 -translate-y-1/2
-            text-xs text-primary-500
-            px-2.5
-            py-1.5
-            leading-none
-            rounded
-            font-semibold
-            uppercase
-            tracking-wide
-            bg-primary-100
-            dark:bg-primary-900
-            dark:text-primary-400
-          "
-        >
-          {{ meta.preSelectedBadge }}
-        </span>
+          :label="meta.preSelectedBadge"
+          class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        />
 
         <div class="flex justify-center text-2xl font-semibold my-2 text-center">
           {{ tier.title }}