61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { ReactNode } from "react";
|
|
|
|
type OptionLink = {
|
|
href: string;
|
|
type: "link";
|
|
};
|
|
type OptionButton = {
|
|
onClick: () => void;
|
|
type: "button";
|
|
};
|
|
type Option = {
|
|
label: string;
|
|
} & (OptionLink | OptionButton);
|
|
|
|
type DropDownMenuProps = {
|
|
options: Option[];
|
|
children: ReactNode;
|
|
};
|
|
|
|
export default function DropDownMenu({ children, options }: DropDownMenuProps) {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="z-header+ w-56" align="end" forceMount>
|
|
<DropdownMenuGroup>
|
|
{options.map((o) => {
|
|
if (o.type === "button") {
|
|
return (
|
|
<DropdownMenuItem key={o.label}>
|
|
<button
|
|
onClick={o.onClick}
|
|
className="flex w-full justify-between"
|
|
>
|
|
{o.label}
|
|
</button>
|
|
</DropdownMenuItem>
|
|
);
|
|
} else {
|
|
return (
|
|
<DropdownMenuItem key={o.label}>
|
|
<Link href={o.href} className="flex w-full justify-between">
|
|
{o.label}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
);
|
|
}
|
|
})}
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|