Add a slot to p-divider for a centered item with space around.

PrefectHQ · Dec 7, 2023 · 6cb4235 · 6cb4235
1 parent f164311
commit 6cb4235
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/demo/sections/components/Divider.vue b/demo/sections/components/Divider.vue
@@ -1,10 +1,14 @@
 <template>
-  <ComponentPage title="Divider" :demos="[{ title: 'Divider' }]">
+  <ComponentPage title="Divider" :demos="[{ title: 'Divider' }, { title: 'With Slot' }]">
     <template #divider>
       <span>above</span>
       <p-divider />
       <span>below</span>
     </template>
+
+    <template #with-slot>
+      <p-divider><span class="text-xl text-subdued">§</span></p-divider>
+    </template>
   </ComponentPage>
 </template>
 

diff --git a/src/components/Divider/PDivider.vue b/src/components/Divider/PDivider.vue
@@ -1,5 +1,14 @@
 <template>
-  <hr class="p-divider">
+  <div class="flex items-center gap-x-2">
+    <hr class="p-divider">
+
+    <template v-if="$slots.default">
+      <div class="p-divider__text">
+        <slot />
+      </div>
+      <hr class="p-divider">
+    </template>
+  </div>
 </template>
 
 <style>
@@ -10,4 +19,11 @@
     w-full
     my-3
   }
+
+  .p-divider__text { @apply
+    px-2
+    flex-shrink-0
+    flex
+    items-center
+  }
 </style>