all repos — website @ 88f53d406f3bbdccdb34173070e2277aaf68e831

My official website.

src/components/Breadcrumbs.astro (view raw)

 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
 
---
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" />
      </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" />}
                  {item.label}
                </span>
              </BreadcrumbPage>
            ) : (
              <BreadcrumbLink href={item.href}>
                <span class="flex items-center gap-x-2">
                  {item.icon && <Icon name={item.icon} class="size-4" />}
                  {item.label}
                </span>
              </BreadcrumbLink>
            )}
          </BreadcrumbItem>
        </>
      ))
    }
  </BreadcrumbList>
</Breadcrumb>