/components/breadcrumb/breadcrumb

import { breadcrumb, crumb } from "@hedia/hexui/components/breadcrumb";
import { span } from "@hedia/html/elements";
import { homeBoldIcon } from "@hedia/iconly/bold";
import {
  computerCaseOutlineIcon,
  documentOutlineIcon,
  dotsOutlineIcon,
  folderOutlineIcon,
} from "@hedia/iconly/outline";

export function Default() {
  return [breadcrumb(crumb({ href: "#" }, "My Drive"), crumb({ href: "#" }, "Documents"), crumb("Report.pdf"))];
}

export function SingleCrumbWithIcon() {
  return [breadcrumb(crumb({ icon: homeBoldIcon() }, "Home"))];
}

export function WithColorIcons() {
  return [
    breadcrumb(
      crumb({ href: "#", icon: span({ class: "text-yellow" }, computerCaseOutlineIcon()) }, "My Drive"),
      crumb({ href: "#", icon: span({ class: "text-blue" }, folderOutlineIcon()) }, "Documents"),
      crumb({ icon: span({ class: "text-green" }, documentOutlineIcon()) }, "Report.pdf"),
    ),
  ];
}

export function WithCustomSeparator() {
  return [
    breadcrumb(
      { separator: dotsOutlineIcon() },
      crumb({ href: "#" }, "My Drive"),
      crumb({ href: "#" }, "Documents"),
      crumb("Report.pdf"),
    ),
  ];
}