98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuPortal,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuLabel,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { cn } from "@/lib/utils";
|
|
import { MenuItem } from "./types";
|
|
import { ReactNode } from "react";
|
|
|
|
interface IOptionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
title?: string;
|
|
menuItems: MenuItem[];
|
|
}
|
|
|
|
export default function Option({
|
|
title,
|
|
menuItems,
|
|
className,
|
|
children,
|
|
...props
|
|
}: IOptionProps) {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
|
|
<DropdownMenuContent className={cn(" w-36 p-3", className)} {...props}>
|
|
{title && (
|
|
<>
|
|
<DropdownMenuLabel>{title}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
</>
|
|
)}
|
|
{/* save a origin item */}
|
|
{/* <DropdownMenuItem>
|
|
<User className="mr-2 h-4 w-4" />
|
|
<span>Profile</span>
|
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
</DropdownMenuItem> */}
|
|
{
|
|
<DropdownMenuGroup>
|
|
{menuItems.map((item) => (
|
|
<>
|
|
{item?.subs && (
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
{item.icon}
|
|
<span className={cn(item.color)}>{item.name}</span>
|
|
{item.separator}
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
{Array.isArray(item.subs) &&
|
|
item?.subs.map((subItem) => (
|
|
<>
|
|
{subItem.name && (
|
|
<DropdownMenuItem
|
|
key={item?.name ?? "" + subItem?.name ?? ""}
|
|
>
|
|
{subItem.icon}
|
|
<span className={cn(subItem.color)}>
|
|
{subItem.name}
|
|
</span>
|
|
</DropdownMenuItem>
|
|
)}
|
|
{subItem.separator && <DropdownMenuSeparator />}
|
|
</>
|
|
))}
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
)}
|
|
{!item?.subs && (
|
|
<>
|
|
{item.name && (
|
|
<DropdownMenuItem key={item?.name ?? ""}>
|
|
{item.icon}
|
|
<span className={cn(item.color)}>{item.name}</span>
|
|
</DropdownMenuItem>
|
|
)}
|
|
{item.separator && <DropdownMenuSeparator />}
|
|
</>
|
|
)}
|
|
</>
|
|
))}
|
|
</DropdownMenuGroup>
|
|
}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|