"use client";
import { createContext, use, useEffect, useState } from "react";
type BreadCrumbItem = {
label: string;
href?: string;
};
const BreadcrumbContext = createContext<{
breadcrumbs: BreadCrumbItem[];
setBreadcrumbs: (breadcrumbs: BreadCrumbItem[]) => void;
}>({
breadcrumbs: [],
setBreadcrumbs: () => {},
});
export function BreadcrumbProvider({
children,
}: {
children: React.ReactNode;
}) {
const [breadcrumbs, setBreadcrumbs] = useState<BreadCrumbItem[]>([]);
return (
<BreadcrumbContext value={{ breadcrumbs, setBreadcrumbs }}>
{children}
</BreadcrumbContext>
);
}
export function BreadcrumbConfig({ items }: { items: BreadCrumbItem[] }) {
const { setBreadcrumbs } = use(BreadcrumbContext);
useEffect(() => {
setBreadcrumbs(items);
return () => {
setBreadcrumbs([]);
};
}, []);
return null;
}
export const useBreadcrumbs = () => {
return use(BreadcrumbContext);
};"use client";
import Link from "next/link";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@workspace/ui/components/breadcrumb";
import { Home } from "lucide-react";
import { Fragment } from "react/jsx-runtime";
import { useBreadcrumbs } from "./breadcrumb-provider";
export function MainBreadCrumb() {
const { breadcrumbs } = useBreadcrumbs();
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/admin">
<Home className="size-5" />
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
{breadcrumbs.map((breadcrumb) => (
<Fragment key={breadcrumb.label}>
<BreadcrumbSeparator />
<BreadcrumbItem key={breadcrumb.label}>
{breadcrumb.href ? (
<BreadcrumbLink asChild>
<Link href={breadcrumb.href}>{breadcrumb.label}</Link>
</BreadcrumbLink>
) : (
<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
)}
</BreadcrumbItem>
</Fragment>
))}
</BreadcrumbList>
</Breadcrumb>
);
}// ...
return (<>
<BreadcrumbProvider>
<BreadcrumbMain />
{children}
</BreadcrumbProvider>
</>)import { BreadcrumbConfig } from "@/components/breadcrumb-provider";
export default function Page() {
return (
<div>
<BreadcrumbConfig items={[{ label: "設定", href: "/settings" }]} />
<h1>Page</h1>
</div>
)
}import { BreadcrumbConfig } from "@/components/breadcrumb-provider";
export default async function Page({ params }: PageProps<"/posts/[id]">) {
const id = (await params).id;
const post = await getPost(id);
return (
<div>
<BreadcrumbConfig items={[
{ label: "ホーム", href: "/" },
{ label: "ポスト", href: "/posts" },
{ label: post.title },
]} />
<h1>{post.title}</h1>
</div>
);
}