feat(component): add component Breadcrumb

Author: ansidev

src/components/Breadcrumb.astro

@@ -0,0 +1,61 @@
+---
+import Icon from '@/components/Icon.astro'
+
+interface BreadcrumbItem {
+  icon: string
+  title: string
+  url: string
+}
+
+interface Props {
+  items: BreadcrumbItem[]
+}
+
+const { items } = Astro.props
+const hasIcon = (item: BreadcrumbItem) => item.icon.length > 0
+---
+<ul role="list" class="breadcrumb">
+  <li class="pr-1">
+    <a href="/" class="breadcrumb-item">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-heart" viewBox="0 0 16 16">
+        <path d="M8 6.982C9.664 5.309 13.825 8.236 8 12 2.175 8.236 6.336 5.309 8 6.982Z"/>
+        <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.707L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.646a.5.5 0 0 0 .708-.707L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
+      </svg>
+      <span class="pl-1">Home</span>
+    </a>
+  </li>
+  {items.map((item) =>
+    <>
+      <li>/</li>
+      <li>
+        {
+          item.url.length === 0
+            ?
+            <div class="breadcrumb-item">
+              { hasIcon(item) && <Icon name={item.icon} /> }
+              <span class="pl-1">{item.title}</span>
+            </div>
+            :
+            <a href={item.url} class="breadcrumb-item">
+              { hasIcon(item) && <Icon name={item.icon} /> }
+              <span class="pl-1">{item.title}</span>
+            </a>
+        }
+      </li>
+    </>
+  )}
+</ul>
+<style is:global>
+.breadcrumb {
+  @apply inline-flex mb-3;
+  @apply list-none pl-0 !important;
+}
+
+.breadcrumb .breadcrumb-item {
+  @apply inline-flex items-center my-0 font-semibold;
+}
+
+.breadcrumb li:not(:first-child) {
+  @apply text-style-primary;
+}
+</style>