112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { Link, usePathname, useRouter } from "@/components/navigation";
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import { ReactNode } from "react";
|
|
|
|
const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<div className="flex justify-between gap-3 items-center mb-6">
|
|
<div className="flex-1">
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<Link href="/dashboard">
|
|
<Icon icon="heroicons:home" className="h-5 w-5" />
|
|
</Link>
|
|
</BreadcrumbItem>
|
|
|
|
<BreadcrumbSeparator />
|
|
|
|
<BreadcrumbItem>
|
|
<button
|
|
onClick={() => router.back()}
|
|
className="capitalize flex items-center gap-1"
|
|
>
|
|
Back
|
|
<BreadcrumbSeparator />
|
|
</button>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</div>
|
|
|
|
<div className="flex-none flex gap-2">{children}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SiteBreadcrumb;
|
|
|
|
// 'use client';
|
|
// import React from 'react'
|
|
// import { Link, usePathname, useRouter } from "@/components/navigation";
|
|
// import {
|
|
// Breadcrumb,
|
|
// BreadcrumbEllipsis,
|
|
// BreadcrumbItem,
|
|
// BreadcrumbLink,
|
|
// BreadcrumbList,
|
|
// BreadcrumbPage,
|
|
// BreadcrumbSeparator,
|
|
// } from "@/components/ui/breadcrumb"
|
|
// import { Icon } from "@/components/ui/icon"
|
|
// import { ReactNode } from "react";
|
|
|
|
// const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
|
|
// const location = usePathname();
|
|
// const locations = location.split('/').filter(path => path)
|
|
|
|
// return (
|
|
// <div className="flex justify-between gap-3 items-center mb-6">
|
|
// <div className="flex-1">
|
|
// <Breadcrumb>
|
|
// <BreadcrumbList>
|
|
|
|
// <BreadcrumbItem
|
|
// >
|
|
// <Link href="/dashboard">
|
|
// <Icon icon="heroicons:home" className=" h-5 w-5" />
|
|
// </Link>
|
|
|
|
// </BreadcrumbItem>
|
|
// <BreadcrumbSeparator />
|
|
|
|
// {
|
|
// locations.map((link, index) => {
|
|
// let href = `/${locations.slice(0, index + 1).join('/')}`
|
|
// let itemLink = link
|
|
// const isLast = index === locations.length - 1;
|
|
// return (
|
|
// <React.Fragment key={index}>
|
|
// <BreadcrumbItem className=' capitalize' >
|
|
// {isLast ? (
|
|
// itemLink?.replaceAll("-", " ")
|
|
// ) : (
|
|
// <Link href={href} >{itemLink?.replaceAll("-", "")}</Link>
|
|
// )}
|
|
// </BreadcrumbItem>
|
|
// {locations.length !== index + 1 && <BreadcrumbSeparator />}
|
|
// </React.Fragment>
|
|
// )
|
|
// })
|
|
// }
|
|
// </BreadcrumbList>
|
|
// </Breadcrumb>
|
|
// </div>
|
|
// <div className=" flex-none flex gap-2">{children}</div>
|
|
// </div>
|
|
// );
|
|
// };
|
|
|
|
// export default SiteBreadcrumb;
|