---interface BreadcrumbItem {  label: string;  href?: string;} interface Props {  items: BreadcrumbItem[];  class?: string;} const { items, class: className = "" } = Astro.props;--- <nav aria-label="Breadcrumb" class={`breadcrumbs ${className}`}>  <ol class="flex items-center flex-wrap gap-2">    {items.map((item, i) => (      <li class="flex items-center gap-2">        {i > 0 && <span class="text-black-onyx/60 text-sm" aria-hidden="true">/</span>}        {item.href ? (          <a href={item.href} class="text-sm text-black-onyx/60 hover:text-black-onyx transition-colors">{item.label}</a>        ) : (          <span class="text-sm text-black-onyx font-medium" aria-current="page">{item.label}</span>        )}      </li>    ))}  </ol></nav>   
    
  

    
      <Breadcrumbs  items={[    { label: "Home", href: "/" },    { label: "Docs", href: "/docs" },    { label: "Components" },  ]}/>