62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { FC } from "react";
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from "./breadcrumb";
|
|
import Link from "next/link";
|
|
|
|
const BreadcrumbBetter: FC<any> = ({ data }) => {
|
|
return (
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild>
|
|
<Link href="/">Home</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
};
|
|
const BreadcrumbBetterLink: FC<{ data: any[]; className?: string }> = ({
|
|
data,
|
|
className,
|
|
}) => {
|
|
const item: any[] = addSeparator(data, ".");
|
|
return (
|
|
<Breadcrumb>
|
|
<BreadcrumbList className={cx(className)} >
|
|
{item.map((e, idx) => {
|
|
if (typeof e === "string" && e === ".")
|
|
return <BreadcrumbSeparator key={"separator_"+idx}/>;
|
|
return (
|
|
<BreadcrumbItem key={"item_"+idx}>
|
|
{e?.url ? (
|
|
<BreadcrumbLink asChild>
|
|
<Link href={e.url} className="hover:underline">{e.title}</Link>
|
|
</BreadcrumbLink>
|
|
) : (
|
|
<BreadcrumbPage>{e.title}</BreadcrumbPage>
|
|
)}
|
|
</BreadcrumbItem>
|
|
);
|
|
})}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
};
|
|
const addSeparator = (arr: any[], separator: any | string) => {
|
|
if (arr.length === 0) return [];
|
|
|
|
// Menggunakan flatMap untuk menyisipkan separator di antara elemen
|
|
return arr.flatMap((item, index) =>
|
|
index < arr.length - 1 ? [item, separator] : [item]
|
|
);
|
|
};
|
|
|
|
export { BreadcrumbBetter, BreadcrumbBetterLink };
|