import { ChevronRight, Home } from "lucide-react"

export default function Breadcrumb() {
  return (
    <nav className="flex" aria-label="Breadcrumb">
      <ol className="flex items-center space-x-2">
        <li>
          <a href="#" className="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">
            <Home className="h-4 w-4" />
            <span className="sr-only">Home</span>
          </a>
        </li>
        <li>
          <ChevronRight className="h-4 w-4 text-zinc-400" />
        </li>
        <li>
          <a href="#" className="text-sm font-medium text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50">
            Components
          </a>
        </li>
        <li>
          <ChevronRight className="h-4 w-4 text-zinc-400" />
        </li>
        <li>
          <a href="#" className="text-sm font-medium text-zinc-900 dark:text-zinc-50" aria-current="page">
            Breadcrumb
          </a>
        </li>
      </ol>
    </nav>
  )
}