binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: breadcrumb component improvement (#3537)

Browse source 
* chore: breadcrumb component improvement

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-02-01 18:13:30 +05:30 • committed by GitHub
parent 7d08a57be6
commit 67cf1785b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 480 additions and 323 deletions
Download patch file Download diff file Expand all files Collapse all files

39
packages/ui/src/breadcrumbs/breadcrumbs.tsx
View file

@ -2,8 +2,6 @@ import * as React from "react";
// icons
import { ChevronRight } from "lucide-react";
// components
import { Tooltip } from "../tooltip";
type BreadcrumbsProps = {
children: any;
@ -25,42 +23,11 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
type Props = {
type?: "text" | "component";
component?: React.ReactNode;
label?: string;
icon?: React.ReactNode;
link?: string;
link?: JSX.Element;
};
const BreadcrumbItem: React.FC<Props> = (props) => {
const { type = "text", component, label, icon, link } = props;
return (
<>
{type != "text" ? (
<div className="flex items-center space-x-2">{component}</div>
) : (
<Tooltip tooltipContent={label} position="bottom">
<li className="flex items-center space-x-2">
<div className="flex flex-wrap items-center gap-2.5">
{link ? (
<a
className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
href={link}
>
{icon && (
<div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
)}
<div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
</a>
) : (
<div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
{icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
<div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
</div>
)}
</div>
</li>
</Tooltip>
)}
</>
);
const { type = "text", component, link } = props;
return <>{type != "text" ? <div className="flex items-center space-x-2">{component}</div> : link}</>;
};
Breadcrumbs.BreadcrumbItem = BreadcrumbItem;