src/components/Breadcrumbs.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

---
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { Icon } from 'astro-icon/components'

export interface BreadcrumbItem {
  href?: string
  label: string
  icon?: string
}

interface Props {
  items: BreadcrumbItem[]
}

const { items } = Astro.props
---

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">
        <Icon name="lucide:home" class="size-4 shrink-0" />
      </BreadcrumbLink>
    </BreadcrumbItem>
    {
      items.map((item, index) => (
        <>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            {index === items.length - 1 ? (
              <BreadcrumbPage>
                <span class="flex items-center gap-x-2">
                  {item.icon && (
                    <Icon name={item.icon} class="size-4 shrink-0" />
                  )}
                  <span>{item.label}</span>
                </span>
              </BreadcrumbPage>
            ) : (
              <BreadcrumbLink href={item.href}>
                <span class="flex items-center gap-x-2">
                  {item.icon && (
                    <Icon name={item.icon} class="size-4 shrink-0" />
                  )}
                  <span>{item.label}</span>
                </span>
              </BreadcrumbLink>
            )}
          </BreadcrumbItem>
        </>
      ))
    }
  </BreadcrumbList>
</Breadcrumb>