Files
lume/packages/ui/src/column/header.tsx
2024-03-22 11:28:54 +07:00

64 lines
2.1 KiB
TypeScript

import { ChevronDownIcon, RefreshIcon, TrashIcon } from "@lume/icons";
import { cn } from "@lume/utils";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { getCurrent } from "@tauri-apps/api/window";
export function ColumnHeader({
id,
name,
className,
}: {
id: number;
name: string;
className?: string;
}) {
const reload = () => {
window.location.reload();
};
const close = async () => {
const mainWindow = getCurrent();
await mainWindow.emit("columns", { type: "remove", id });
};
return (
<DropdownMenu.Root>
<div
className={cn(
"flex h-11 w-full shrink-0 items-center justify-center gap-2 border-b border-neutral-100 dark:border-neutral-900",
className,
)}
>
<DropdownMenu.Trigger asChild>
<button type="button" className="inline-flex items-center gap-2">
<div className="text-[13px] font-medium">{name}</div>
<ChevronDownIcon className="size-4" />
</button>
</DropdownMenu.Trigger>
</div>
<DropdownMenu.Portal>
<DropdownMenu.Content
sideOffset={5}
className="flex w-[200px] flex-col overflow-hidden rounded-xl bg-black p-1 focus:outline-none dark:bg-white"
>
<DropdownMenu.Item
onClick={reload}
className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
>
<RefreshIcon className="size-4" />
Reload
</DropdownMenu.Item>
<DropdownMenu.Item
onClick={close}
className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
>
<TrashIcon className="size-4" />
Close
</DropdownMenu.Item>
<DropdownMenu.Arrow className="fill-black dark:fill-white" />
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
);
}