Breadcrumb

"use client";

import * as Breadcrumb from "@lora-ui/breadcrumb";

export default function Base() {
  const breadcrumbs = [
    {
      label: "button",
      href: "/breadcrumb",
    },
    {
      label: "select",
      href: "/breadcrumb",
    },
    {
      label: "breadcrumb",
      href: "/breadcrumb",
    },
    {
      label: "dropdown",
      href: "/breadcrumb",
    },
    {
      label: "badge",
      href: "/breadcrumb",
    },
  ];

  return (
    <Breadcrumb.Root
      className="flex flex-wrap items-center"
      activeItemClass="text-sm font-semibold dark:text-[#cecfd2] text-[#6941c6]"
      separator={
        <svg
          role="separator"
          width="15"
          height="15"
          viewBox="0 0 15 15"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="mx-2 text-[#d0d5dd] dark:text-[#61646c]"
        >
          <path
            d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
            fill="currentColor"
            fillRule="evenodd"
            clipRule="evenodd"
          />
        </svg>
      }
    >
      {breadcrumbs.map((breadcrumb, index) => {
        return (
          <Breadcrumb.Item
            key={index}
            href={breadcrumb.href}
            className="flex items-center text-sm font-medium text-[#475467] dark:text-[#94969c]"
            tabIndex={0}
            as="a"
          >
            {breadcrumb.label.charAt(0).toUpperCase() +
              breadcrumb.label.slice(1)}
          </Breadcrumb.Item>
        );
      })}
    </Breadcrumb.Root>
  );
}

"use client";

import * as Breadcrumb from "@lora-ui/breadcrumb";

export default function Collapsed() {
  const breadcrumbs = [
    {
      label: "button",
      href: "/breadcrumb",
    },
    {
      label: "select",
      href: "/breadcrumb",
    },
    {
      label: "breadcrumb",
      href: "/breadcrumb",
    },
    {
      label: "dropdown",
      href: "/breadcrumb",
    },
    {
      label: "badge",
      href: "/breadcrumb",
    },
  ];

  return (
    <Breadcrumb.Root
      maxLength={3}
      className="flex flex-wrap items-center"
      menuContentClass="bg-[#ffffff] dark:bg-[#0c111d] rounded-lg border-box border border-[#eaecf0] dark:border-[#1f242f] py-1 shadow flex flex-col"
      menuItemClass="py-1 px-2 w-full hover:bg-[#f9fafb] dark:hover:bg-[#1f242f] text-[#101828] dark:text-[#f5f5f6] text-base font-medium focus:outline-none focus:bg-[#f9fafb] dark:focus:bg-[#1f242f]"
      menuTriggerClass="block py-[1px] px-[6px] flex justify-between text-[#101828] dark:text-[#f5f5f6] text-base font-medium"
      activeItemClass="text-sm font-semibold dark:text-[#cecfd2] text-[#6941c6]"
      separator={
        <svg
          role="separator"
          width="15"
          height="15"
          viewBox="0 0 15 15"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="mx-2 text-[#d0d5dd] dark:text-[#61646c]"
        >
          <path
            d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
            fill="currentColor"
            fillRule="evenodd"
            clipRule="evenodd"
          />
        </svg>
      }
      dropdownTriggerIcon={
        <svg
          width="15"
          height="15"
          viewBox="0 0 15 15"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="flex items-center text-sm font-medium text-[#475467] dark:text-[#94969c]"
        >
          <path
            d="M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z"
            fill="currentColor"
            fillRule="evenodd"
            clipRule="evenodd"
          />
        </svg>
      }
    >
      {breadcrumbs.map((breadcrumb, index) => {
        return (
          <Breadcrumb.Item
            key={index}
            href={breadcrumb.href}
            className="flex items-center text-sm font-medium text-[#475467] dark:text-[#94969c]"
            tabIndex={0}
            as="a"
          >
            {breadcrumb.label.charAt(0).toUpperCase() +
              breadcrumb.label.slice(1)}
          </Breadcrumb.Item>
        );
      })}
    </Breadcrumb.Root>
  );
}