From 460ca11cc7dce7945c5727eb6d5bc57f57f3138c Mon Sep 17 00:00:00 2001
From: Biya Paul <77636493+bpsmartdesign@users.noreply.github.com>
Date: Sun, 23 Jul 2023 23:11:36 +0100
Subject: [PATCH] feat: create breadcrumb plugin component (#16)

Co-authored-by: Sacha Stafyniak <sacha@digisquad.io>
---
 README.md                            | 23 ++++++++
 src/plugins/components/breadcrumb.ts | 87 ++++++++++++++++++++++++++++
 src/plugins/components/index.ts      |  2 +
 3 files changed, 112 insertions(+)
 create mode 100644 src/plugins/components/breadcrumb.ts

diff --git a/README.md b/README.md
index 476f200..05bace0 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,29 @@ export default withShurikenUI({
   theme: {
     extend: {
       shurikenUi: {
+        breadcrumb: {
+          list: {
+            font: 'sans',
+            text: '[0.85rem]',
+            itemInner: {
+              text: 'muted-500',
+              duration: '300',
+              icon: {
+                size: '4',
+                dot: {
+                  text: 'xl',
+                },
+              },
+              link: {
+                textHover: 'primary-500',
+                texFocus: 'primary-500',
+              },
+              itemText: {
+                text: 'muted-500',
+                space: '2',
+              },
+            },
+          }
         avatarGroup: {
           avatarOuter: {
             bgDark: 'muted-800',
diff --git a/src/plugins/components/breadcrumb.ts b/src/plugins/components/breadcrumb.ts
new file mode 100644
index 0000000..428f74b
--- /dev/null
+++ b/src/plugins/components/breadcrumb.ts
@@ -0,0 +1,87 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption, defaultPluginOptions } from '../options'
+
+const defaultBreadcrumbConfig = {
+  list: {
+    font: 'sans',
+    text: '[0.85rem]',
+    itemInner: {
+      text: 'muted-500',
+      duration: '300',
+      icon: {
+        size: '4',
+        dot: {
+          text: 'xl',
+        },
+      },
+      link: {
+        textHover: 'primary-500',
+        texFocus: 'primary-500',
+      },
+      itemText: {
+        text: 'muted-500',
+        space: '2',
+      },
+    },
+  },
+}
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
+    return function ({ addComponents, theme }) {
+      const config = theme(
+        'shurikenUi.breadcrumb'
+      ) satisfies typeof defaultBreadcrumbConfig
+
+      addComponents({
+        [`.${prefix}-breadcrumb`]: {
+          [`.${prefix}-breadcrumb-list`]: {
+            [`@apply mb-6 flex items-center font-${config.list.font} text-${config.list.text}`]:
+              {},
+            [`.${prefix}-breadcrumb-item-mobile`]: {
+              [`@apply me-3 sm:hidden`]: {},
+            },
+            [`.${prefix}-breadcrumb-item:not(:last-child)`]: {
+              [`@apply flex`]: {},
+            },
+            [`.${prefix}-breadcrumb-item:last-child`]: {
+              [`@apply hidden sm:flex`]: {},
+            },
+            [`.${prefix}-item-inner`]: {
+              [`@apply text-${config.list.itemInner.text} flex items-center gap-x-1 transition-colors duration-${config.list.itemInner.duration}`]:
+                {},
+
+              [`.${prefix}-item-icon`]: {
+                [`@apply flex items-center justify-center h-${config.list.itemInner.icon.size} w-${config.list.itemInner.icon.size} shrink-0`]:
+                  {},
+                [`&.${prefix}-has-dot`]: {
+                  [`@apply text-${config.list.itemInner.icon.dot.text}`]: {},
+                },
+              },
+              [`&.${prefix}-has-link`]: {
+                [`@apply hover:text-${config.list.itemInner.link.textHover} focus:text-${config.list.itemInner.link.texFocus}`]:
+                  {},
+              },
+              [`.${prefix}-item-text`]: {
+                [`@apply text-${config.list.itemInner.itemText.text} px-${config.list.itemInner.itemText.space}`]:
+                  {},
+              },
+            },
+          },
+        },
+      })
+    }
+  },
+  function () {
+    return {
+      theme: {
+        shurikenUi: {
+          breadcrumb: defaultBreadcrumbConfig,
+        },
+      },
+    }
+  }
+)
diff --git a/src/plugins/components/index.ts b/src/plugins/components/index.ts
index f9ae399..55ef67c 100644
--- a/src/plugins/components/index.ts
+++ b/src/plugins/components/index.ts
@@ -31,8 +31,10 @@ import switchThin from './switch-thin'
 import switchBall from './switch-ball'
 import textarea from './textarea'
 import tooltip from './tooltip'
+import breadcrumb from './breadcrumb'
 
 const components = [
+  breadcrumb,
   avatarGroup,
   autocomplete,
   avatar,