base
This commit is contained in:
DCCONSTRUCTIONS
@@ -0,0 +1,229 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { Home, Settings, Briefcase, GridIcon, Layers2, FileIcon } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { ContrastIcon, EpicIcon, LayersIcon } from "@plane/propel/icons";
|
||||
import { Breadcrumbs } from "./breadcrumbs";
|
||||
import { BreadcrumbNavigationDropdown } from "./navigation-dropdown";
|
||||
|
||||
const meta: Meta<typeof Breadcrumbs> = {
|
||||
title: "UI/Breadcrumbs",
|
||||
component: Breadcrumbs,
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
type TBreadcrumbBlockProps = {
|
||||
href?: string;
|
||||
label?: string;
|
||||
icon?: React.ReactNode;
|
||||
disableTooltip?: boolean;
|
||||
};
|
||||
|
||||
// TODO: remove this component and use web Link component
|
||||
function BreadcrumbBlock(props: TBreadcrumbBlockProps) {
|
||||
const { label, icon, disableTooltip = false } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Breadcrumbs.ItemWrapper label={label} disableTooltip={disableTooltip}>
|
||||
{icon && <div className="flex size-4 items-center justify-center overflow-hidden !text-16">{icon}</div>}
|
||||
{label && <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>}
|
||||
</Breadcrumbs.ItemWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Breadcrumbs>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: [
|
||||
<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
|
||||
<Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
|
||||
<Breadcrumbs.Item
|
||||
key="current"
|
||||
component={<BreadcrumbBlock href="/projects/current" label="Current Project" />}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithLoading: Story = {
|
||||
args: {
|
||||
isLoading: true,
|
||||
children: [
|
||||
<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
|
||||
<Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithCustomComponent: Story = {
|
||||
args: {
|
||||
children: [
|
||||
<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
|
||||
<Breadcrumbs.Item
|
||||
key="custom"
|
||||
component={
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="bg-blue-500 size-4 rounded-full" />
|
||||
<span>Custom Component</span>
|
||||
</div>
|
||||
}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleItem: Story = {
|
||||
args: {
|
||||
children: [<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithNavigationDropdown: Story = {
|
||||
args: {
|
||||
children: [
|
||||
<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
|
||||
<Breadcrumbs.Item
|
||||
key="projects"
|
||||
component={
|
||||
<BreadcrumbNavigationDropdown
|
||||
selectedItemKey="project-1"
|
||||
navigationItems={[
|
||||
{
|
||||
key: "project-1",
|
||||
title: "Project Alpha",
|
||||
|
||||
action: () => console.log("Project Alpha selected"),
|
||||
},
|
||||
{
|
||||
key: "project-2",
|
||||
title: "Project Beta",
|
||||
|
||||
action: () => console.log("Project Beta selected"),
|
||||
},
|
||||
{
|
||||
key: "project-3",
|
||||
title: "Project Gamma",
|
||||
|
||||
action: () => console.log("Project Gamma selected"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
showSeparator={false}
|
||||
/>,
|
||||
<Breadcrumbs.Item key="settings" component={<BreadcrumbBlock href="/settings" label="Settings" />} />,
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithNavigationDropdownAndIcons: Story = {
|
||||
args: {
|
||||
children: [
|
||||
<Breadcrumbs.Item
|
||||
key="home"
|
||||
component={<BreadcrumbBlock href="/" label="Home" icon={<Home className="size-3.5" />} />}
|
||||
/>,
|
||||
<Breadcrumbs.Item
|
||||
key="projects"
|
||||
component={
|
||||
<BreadcrumbNavigationDropdown
|
||||
selectedItemKey="project-1"
|
||||
navigationItems={[
|
||||
{
|
||||
key: "project-1",
|
||||
title: "Project Alpha",
|
||||
icon: Briefcase,
|
||||
|
||||
action: () => console.log("Project Alpha selected"),
|
||||
},
|
||||
{
|
||||
key: "project-2",
|
||||
title: "Project Beta",
|
||||
icon: Briefcase,
|
||||
|
||||
// disabled: true,
|
||||
action: () => console.log("Project Beta selected"),
|
||||
},
|
||||
{
|
||||
key: "project-3",
|
||||
title: "Project Gamma",
|
||||
icon: Briefcase,
|
||||
|
||||
action: () => console.log("Project Gamma selected"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
showSeparator={false}
|
||||
/>,
|
||||
<Breadcrumbs.Item
|
||||
key="features"
|
||||
component={
|
||||
<BreadcrumbNavigationDropdown
|
||||
selectedItemKey="feature-1"
|
||||
navigationItems={[
|
||||
{
|
||||
key: "feature-1",
|
||||
title: "Epics",
|
||||
icon: EpicIcon,
|
||||
|
||||
action: () => console.log("Feature Alpha selected"),
|
||||
},
|
||||
{
|
||||
key: "feature-2",
|
||||
title: "Work items",
|
||||
icon: LayersIcon,
|
||||
|
||||
// disabled: true,
|
||||
action: () => console.log("Feature Beta selected"),
|
||||
},
|
||||
{
|
||||
key: "feature-3",
|
||||
title: "Cycles",
|
||||
icon: ContrastIcon,
|
||||
|
||||
action: () => console.log("Feature Gamma selected"),
|
||||
},
|
||||
{
|
||||
key: "feature-3",
|
||||
title: "Modules",
|
||||
icon: GridIcon,
|
||||
|
||||
action: () => console.log("Feature Gamma selected"),
|
||||
},
|
||||
{
|
||||
key: "feature-3",
|
||||
title: "Views",
|
||||
icon: Layers2,
|
||||
|
||||
action: () => console.log("Feature Gamma selected"),
|
||||
},
|
||||
{
|
||||
key: "feature-3",
|
||||
title: "Pages",
|
||||
icon: FileIcon,
|
||||
|
||||
action: () => console.log("Feature Gamma selected"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
showSeparator={false}
|
||||
/>,
|
||||
<Breadcrumbs.Item
|
||||
key="settings"
|
||||
component={<BreadcrumbBlock href="/settings" label="Settings" icon={<Settings className="size-3.5" />} />}
|
||||
isLast
|
||||
/>,
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import * as React from "react";
|
||||
import { ChevronRightIcon } from "@plane/propel/icons";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import { cn } from "../utils";
|
||||
|
||||
type BreadcrumbsProps = {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
onBack?: () => void;
|
||||
isLoading?: boolean;
|
||||
};
|
||||
|
||||
export function BreadcrumbItemLoader() {
|
||||
return (
|
||||
<div className="flex h-7 animate-pulse items-center gap-2">
|
||||
<div className="group flex h-full items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium">
|
||||
<span className="h-full w-5 rounded-sm bg-layer-1" />
|
||||
<span className="h-full w-16 rounded-sm bg-layer-1" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Breadcrumbs({ className, children, onBack, isLoading = false }: BreadcrumbsProps) {
|
||||
const [isSmallScreen, setIsSmallScreen] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsSmallScreen(window.innerWidth <= 640); // Adjust this value as per your requirement
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
handleResize(); // Call it initially to set the correct state
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
const childrenArray = React.Children.toArray(children);
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-grow items-center gap-0.5 overflow-hidden", className)}>
|
||||
{!isSmallScreen && (
|
||||
<>
|
||||
{childrenArray.map((child, index) => {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbItemLoader />
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (React.isValidElement<BreadcrumbItemProps>(child)) {
|
||||
return React.cloneElement(child, {
|
||||
isLast: index === childrenArray.length - 1,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isSmallScreen && childrenArray.length > 1 && (
|
||||
<>
|
||||
<div className="flex items-center gap-2.5 p-1">
|
||||
{onBack && (
|
||||
<span onClick={onBack} className="text-secondary">
|
||||
...
|
||||
</span>
|
||||
)}
|
||||
<ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0 text-placeholder" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2.5 p-1">
|
||||
{isLoading ? (
|
||||
<BreadcrumbItemLoader />
|
||||
) : React.isValidElement(childrenArray[childrenArray.length - 1]) ? (
|
||||
React.cloneElement(childrenArray[childrenArray.length - 1] as React.ReactElement, {
|
||||
isLast: true,
|
||||
})
|
||||
) : (
|
||||
childrenArray[childrenArray.length - 1]
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{isSmallScreen && childrenArray.length === 1 && childrenArray}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// breadcrumb item
|
||||
type BreadcrumbItemProps = {
|
||||
component?: React.ReactNode;
|
||||
showSeparator?: boolean;
|
||||
isLast?: boolean;
|
||||
};
|
||||
|
||||
function BreadcrumbItem(props: BreadcrumbItemProps) {
|
||||
const { component, showSeparator = true, isLast = false } = props;
|
||||
return (
|
||||
<div className="flex h-6 items-center gap-0.5">
|
||||
{component}
|
||||
{showSeparator && !isLast && <BreadcrumbSeparator />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// breadcrumb icon
|
||||
type BreadcrumbIconProps = {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function BreadcrumbIcon(props: BreadcrumbIconProps) {
|
||||
const { children, className } = props;
|
||||
return <div className={cn("flex size-4 items-center justify-start overflow-hidden", className)}>{children}</div>;
|
||||
}
|
||||
|
||||
// breadcrumb label
|
||||
type BreadcrumbLabelProps = {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function BreadcrumbLabel(props: BreadcrumbLabelProps) {
|
||||
const { children, className } = props;
|
||||
return (
|
||||
<div className={cn("relative line-clamp-1 block max-w-[150px] truncate overflow-hidden", className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// breadcrumb separator
|
||||
type BreadcrumbSeparatorProps = {
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
iconClassName?: string;
|
||||
showDivider?: boolean;
|
||||
};
|
||||
|
||||
function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
|
||||
const { className, containerClassName, iconClassName, showDivider = false } = props;
|
||||
return (
|
||||
<div className={cn("relative flex h-full items-center justify-center px-1.5 py-1", className)}>
|
||||
{showDivider && <span className="absolute top-0 -left-0.5 h-full w-[1.8px] bg-surface-1" />}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-shrink-0 items-center justify-center rounded-sm text-placeholder transition-all",
|
||||
containerClassName
|
||||
)}
|
||||
>
|
||||
<ChevronRightIcon className={cn("h-3.5 w-3.5 flex-shrink-0", iconClassName)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// breadcrumb wrapper
|
||||
type BreadcrumbItemWrapperProps = {
|
||||
label?: string;
|
||||
disableTooltip?: boolean;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
type?: "link" | "text";
|
||||
isLast?: boolean;
|
||||
};
|
||||
|
||||
function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
|
||||
const { label, disableTooltip = false, children, className, type = "link", isLast = false } = props;
|
||||
return (
|
||||
<Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
|
||||
<div
|
||||
className={cn(
|
||||
"group flex h-full cursor-default items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium",
|
||||
{
|
||||
"text-primary": isLast,
|
||||
"text-tertiary": !isLast,
|
||||
"cursor-pointer hover:bg-layer-transparent-hover hover:text-primary": type === "link" && !isLast,
|
||||
},
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
Breadcrumbs.Item = BreadcrumbItem;
|
||||
Breadcrumbs.Icon = BreadcrumbIcon;
|
||||
Breadcrumbs.Label = BreadcrumbLabel;
|
||||
Breadcrumbs.Separator = BreadcrumbSeparator;
|
||||
Breadcrumbs.ItemWrapper = BreadcrumbItemWrapper;
|
||||
|
||||
export { Breadcrumbs, BreadcrumbItem, BreadcrumbIcon, BreadcrumbLabel, BreadcrumbSeparator, BreadcrumbItemWrapper };
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
export * from "./breadcrumbs";
|
||||
export * from "./navigation-dropdown";
|
||||
export * from "./navigation-search-dropdown";
|
||||
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import { CheckIcon } from "lucide-react";
|
||||
import * as React from "react";
|
||||
// ui
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import type { TContextMenuItem } from "../dropdowns";
|
||||
import { CustomMenu } from "../dropdowns";
|
||||
import { cn } from "../utils";
|
||||
import { Breadcrumbs } from "./breadcrumbs";
|
||||
|
||||
type TBreadcrumbNavigationDropdownProps = {
|
||||
selectedItemKey: string;
|
||||
navigationItems: TContextMenuItem[];
|
||||
navigationDisabled?: boolean;
|
||||
handleOnClick?: () => void;
|
||||
isLast?: boolean;
|
||||
};
|
||||
|
||||
export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdownProps) {
|
||||
const { selectedItemKey, navigationItems, navigationDisabled = false, handleOnClick, isLast = false } = props;
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
// derived values
|
||||
const selectedItem = navigationItems.find((item) => item.key === selectedItemKey);
|
||||
const selectedItemIcon = selectedItem?.icon ? (
|
||||
<selectedItem.icon className={cn("size-4", selectedItem.iconClassName)} />
|
||||
) : undefined;
|
||||
|
||||
// if no selected item, return null
|
||||
if (!selectedItem) return null;
|
||||
|
||||
function NavigationButton() {
|
||||
return (
|
||||
<Tooltip tooltipContent={selectedItem?.title} position="bottom" disabled={isOpen}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
if (!isLast) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleOnClick?.();
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"group flex h-full cursor-pointer items-center gap-2 rounded-sm rounded-r-none px-1.5 py-1 text-13 font-medium text-tertiary",
|
||||
{
|
||||
"hover:bg-layer-1 hover:text-primary": !isLast,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="flex text-tertiary @4xl:hidden">...</div>
|
||||
<div className="hidden items-center gap-2 @4xl:flex">
|
||||
{selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
|
||||
<Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
if (navigationDisabled) {
|
||||
return <NavigationButton />;
|
||||
}
|
||||
|
||||
return (
|
||||
<CustomMenu
|
||||
customButton={
|
||||
<>
|
||||
<NavigationButton />
|
||||
<Breadcrumbs.Separator
|
||||
className={cn("rounded-r-sm", {
|
||||
"bg-layer-1": isOpen && !isLast,
|
||||
"hover:bg-layer-1": !isLast,
|
||||
})}
|
||||
containerClassName="p-0"
|
||||
iconClassName={cn("group-hover:rotate-90 hover:text-primary", {
|
||||
"text-primary": isOpen,
|
||||
"rotate-90": isOpen || isLast,
|
||||
})}
|
||||
showDivider={!isLast}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
placement="bottom-start"
|
||||
className="h-full rounded-sm"
|
||||
customButtonClassName={cn(
|
||||
"group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
|
||||
{
|
||||
"bg-surface-2": isOpen,
|
||||
}
|
||||
)}
|
||||
closeOnSelect
|
||||
menuButtonOnClick={() => {
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
onMenuClose={() => {
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
{navigationItems.map((item) => {
|
||||
if (item.shouldRender === false) return null;
|
||||
return (
|
||||
<CustomMenu.MenuItem
|
||||
key={item.key}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (item.key === selectedItemKey) return;
|
||||
item.action();
|
||||
}}
|
||||
className={cn(
|
||||
"flex items-center gap-2",
|
||||
{
|
||||
"text-placeholder": item.disabled,
|
||||
},
|
||||
item.className
|
||||
)}
|
||||
disabled={item.disabled}
|
||||
>
|
||||
{item.icon && <item.icon className={cn("size-4 flex-shrink-0", item.iconClassName)} />}
|
||||
<div className="w-full">
|
||||
<h5>{item.title}</h5>
|
||||
{item.description && (
|
||||
<p
|
||||
className={cn("whitespace-pre-line text-tertiary", {
|
||||
"text-placeholder": item.disabled,
|
||||
})}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{item.key === selectedItemKey && <CheckIcon className="size-3.5 flex-shrink-0" />}
|
||||
</CustomMenu.MenuItem>
|
||||
);
|
||||
})}
|
||||
</CustomMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import * as React from "react";
|
||||
import { useState } from "react";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import type { ICustomSearchSelectOption } from "@plane/types";
|
||||
import { CustomSearchSelect } from "../dropdowns";
|
||||
import { cn } from "../utils";
|
||||
import { Breadcrumbs } from "./breadcrumbs";
|
||||
|
||||
type TBreadcrumbNavigationSearchDropdownProps = {
|
||||
icon?: React.ReactNode;
|
||||
title?: string;
|
||||
selectedItem: string;
|
||||
navigationItems: ICustomSearchSelectOption[];
|
||||
onChange?: (value: string) => void;
|
||||
navigationDisabled?: boolean;
|
||||
isLast?: boolean;
|
||||
handleOnClick?: () => void;
|
||||
disableRootHover?: boolean;
|
||||
shouldTruncate?: boolean;
|
||||
};
|
||||
|
||||
export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationSearchDropdownProps) {
|
||||
const {
|
||||
icon,
|
||||
title,
|
||||
selectedItem,
|
||||
navigationItems,
|
||||
onChange,
|
||||
navigationDisabled = false,
|
||||
isLast = false,
|
||||
handleOnClick,
|
||||
shouldTruncate = false,
|
||||
} = props;
|
||||
// state
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<CustomSearchSelect
|
||||
onOpen={() => {
|
||||
setIsDropdownOpen(true);
|
||||
}}
|
||||
onClose={() => {
|
||||
setIsDropdownOpen(false);
|
||||
}}
|
||||
options={navigationItems}
|
||||
value={selectedItem}
|
||||
onChange={(value: string) => {
|
||||
if (value !== selectedItem) {
|
||||
onChange?.(value);
|
||||
}
|
||||
}}
|
||||
customButton={
|
||||
<>
|
||||
<Tooltip tooltipContent={title} position="bottom">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
if (!isLast) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleOnClick?.();
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"group flex h-full cursor-pointer items-center gap-2 rounded-sm rounded-r-none px-1.5 py-1 text-13 font-medium text-tertiary",
|
||||
{
|
||||
"hover:bg-layer-1 hover:text-primary": !isLast,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{shouldTruncate && <div className="flex text-tertiary @4xl:hidden">...</div>}
|
||||
<div
|
||||
className={cn("flex gap-2", {
|
||||
"hidden items-center gap-2 @4xl:flex": shouldTruncate,
|
||||
})}
|
||||
>
|
||||
{icon && <Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}
|
||||
<Breadcrumbs.Label>{title}</Breadcrumbs.Label>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Breadcrumbs.Separator
|
||||
className={cn("rounded-r-sm", {
|
||||
"bg-layer-1": isDropdownOpen && !isLast,
|
||||
"hover:bg-layer-1": !isLast,
|
||||
})}
|
||||
containerClassName="p-0"
|
||||
iconClassName={cn("group-hover:rotate-90 hover:text-primary", {
|
||||
"text-primary": isDropdownOpen,
|
||||
"rotate-90": isDropdownOpen || isLast,
|
||||
})}
|
||||
showDivider={!isLast}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
disabled={navigationDisabled}
|
||||
className="h-full rounded-sm"
|
||||
customButtonClassName={cn(
|
||||
"group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
|
||||
{
|
||||
"bg-surface-2": isDropdownOpen,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user