Solving issue #14 feat: add breadcrumb component (#28)

* Added Breadcrumb component

* feat: breadcrumb improved

---------

Co-authored-by: Anwarul Islam <[email protected]>

src/components/Breadcrumb.vue

@@ -0,0 +1,45 @@
+<template>
+  <nav>
+    <ul
+      class="flex items-center overflow-x-auto whitespace-nowrap px-4 py-2 text-tiny"
+    >
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        :class="{ 'last-item': index === items.length - 1 }"
+        class="flex items-center"
+        @click="emit('select', { item, index })"
+      >
+        <span v-if="index < items.length - 1">
+          {{ item }}
+        </span>
+
+        <span v-else>
+          {{ item }}
+        </span>
+
+        <span v-if="index < items.length - 1" class="mx-2">
+          <IconChevronRight />
+        </span>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import IconChevronRight from "~icons/lucide/chevron-right"
+
+defineProps<{
+  items: string[]
+}>()
+
+const emit = defineEmits<{
+  (
+    e: "select",
+    value: {
+      item: string
+      index: number
+    },
+  ): void
+}>()
+</script>

src/components/index.ts

@@ -2,4 +2,5 @@ export * from "./button"
 export * from "./smart"
 export * from "./modal"
 export * from "./toast"
-export { default as HoppBadge } from "./Badge.vue"
+export { default as HoppBreadcrumb } from "./Breadcrumb.vue"
+export { default as HoppBadge } from "./Badge.vue"

src/stories/Breadcrumb.story.vue

@@ -0,0 +1,18 @@
+<template>
+  <Story title="Breadcrumb">
+    <Variant title="Single">
+      <HoppBreadcrumb
+        :items="['Home', 'Library', 'Data']"
+        @select="onBreadcrumbSelect"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppBreadcrumb } from "../components"
+
+const onBreadcrumbSelect = (value: { item: string; index: number }) => {
+  alert(`Selected: ${value.item} at index: ${value.index}`)
+}
+</script>