Breadcrumb

import React from "react";
import Link from "next/link";
import { Breadcrumb } from "@/ui/breadcrumb";

function renamed(str: string) {
  const words = str.split("-");
  return words.map(word => word.charAt(0).toUpperCase() + str.slice(1).toLowerCase()).join(" ");
}

// Declarative Props
export function BreadcrumbDeclarativeUsageDemo() {
  const pathname = "docs/web/components/breadcrumb";
  const paths = pathname.split("/").filter(Boolean);
  const active = (index: number) => index === paths.length - 1 || undefined;
  const links = (index: number) => (active(index) ? "" : `/${paths.slice(0, index + 1).join("/")}`);
  const items = paths.map((path, index) => (
    <Link key={path} href={links(index)} aria-disabled={active(index)}>
      {renamed(path)}
    </Link>
  ));
  return <Breadcrumb items={items} />;
}

// Compound Components
export function BreadcrumbCompoundUsageDemo() {
  const pathname = "docs/web/components/breadcrumb";
  const paths = pathname.split("/").filter(Boolean);
  const active = (index: number) => index === paths.length - 1 || undefined;
  const links = (index: number) => (active(index) ? "" : `/${paths.slice(0, index + 1).join("/")}`);

  return (
    <Breadcrumb>
      {paths.map((path, index) => (
        <React.Fragment key={path}>
          <Breadcrumb.Item>
            <Link href={links(index)} aria-disabled={active(index)}>
              {renamed(path)}
            </Link>
          </Breadcrumb.Item>
          {index < paths.length - 1 && <Breadcrumb.Separator separator="⇄" />}
        </React.Fragment>
      ))}
    </Breadcrumb>
  );
}

"use client";
import React from "react";
import Link from "next/link";
import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from "@/ui/breadcrumb";

function renamed(str: string) {
  const words = str.split("-");
  return words.map(word => word.charAt(0).toUpperCase() + str.slice(1).toLowerCase()).join(" ");
}

// Declarative Props
export function BreadcrumbChangeSeparatorDeclarativeDemo() {
  const pathname = "docs/web/components/breadcrumb";
  const paths = pathname.split("/").filter(Boolean);
  const active = (index: number) => index === paths.length - 1 || undefined;
  const links = (index: number) => (active(index) ? "" : `/${paths.slice(0, index + 1).join("/")}`);
  const separator = (index: number) => (index % 2 === 0 ? "+" : "-");

  const items = paths.map((path, index) => (
    <Link key={path} href={links(index)} aria-disabled={active(index)}>
      {renamed(path)}
    </Link>
  ));

  return <Breadcrumb gap={16} items={items} overflowWrap separator={separator} />;
}

// Independent Components
export function BreadcrumbChangeSeparatorIndependentDemo() {
  const pathname = "docs/web/components/breadcrumb";
  const paths = pathname.split("/").filter(Boolean);
  const active = (index: number) => index === paths.length - 1 || undefined;
  const links = (index: number) => (active(index) ? "" : `/${paths.slice(0, index + 1).join("/")}`);

  return (
    <Breadcrumb gap={14} overflowWrap>
      {paths.map((path, index) => (
        <React.Fragment key={path}>
          <BreadcrumbItem>
            <Link href={links(index)} aria-disabled={active(index)}>
              {renamed(path)}
            </Link>
          </BreadcrumbItem>
          {index < paths.length - 1 && index % 2 === 0 ? <BreadcrumbSeparator separator="+" /> : <BreadcrumbSeparator separator="-" />}
        </React.Fragment>
      ))}
    </Breadcrumb>
  );
}