plane/ui/Breadcrumbs/index.tsx

60 lines
1.7 KiB
TypeScript
Raw Normal View History

2022-11-19 14:21:26 +00:00
import { ArrowLeftIcon, HomeIcon } from "@heroicons/react/24/outline";
import Link from "next/link";
import { useRouter } from "next/router";
type BreadcrumbsProps = {
children: any;
};
const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children }: BreadcrumbsProps) => {
2022-11-19 14:21:26 +00:00
const router = useRouter();
return (
<>
<div className="flex gap-3 ml-1">
<div
className="bg-indigo-50 hover:bg-indigo-100 duration-300 px-3 py-1 rounded-tl-lg rounded-tr-md rounded-br-lg rounded-bl-md skew-x-[-20deg] text-sm text-center grid place-items-center cursor-pointer"
onClick={() => router.back()}
>
<p className="skew-x-[20deg]">
<ArrowLeftIcon className="h-3 w-3" />
</p>
</div>
{children}
2022-11-19 14:21:26 +00:00
</div>
</>
);
};
type BreadcrumbItemProps = {
title: string;
link?: string;
icon?: any;
};
const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) => {
2022-11-19 14:21:26 +00:00
return (
<>
{link ? (
<Link href={link}>
2022-11-19 14:21:26 +00:00
<a className="bg-indigo-50 hover:bg-indigo-100 duration-300 px-4 py-1 rounded-tl-lg rounded-tr-md rounded-br-lg rounded-bl-md skew-x-[-20deg] text-sm text-center">
<p className={`skew-x-[20deg] ${icon ? "flex items-center gap-2" : ""}`}>
{icon ?? null}
{title}
2022-11-19 14:21:26 +00:00
</p>
</a>
</Link>
) : (
<div className="bg-indigo-50 px-4 py-1 rounded-tl-lg rounded-tr-md rounded-br-lg rounded-bl-md skew-x-[-20deg] text-sm text-center">
<p className={`skew-x-[20deg] ${icon ? "flex items-center gap-2" : ""}`}>
{icon}
{title}
2022-11-19 14:21:26 +00:00
</p>
</div>
)}
</>
);
};
export { Breadcrumbs, BreadcrumbItem };