90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import { FileIcon, Pencil1Icon } from "@radix-ui/react-icons";
|
|
import { cn } from "@/util/utils";
|
|
import type { Folder } from "../types/folderTypes";
|
|
import { DeleteFolderButton } from "./DeleteFolderButton";
|
|
import { EditFolderDialog } from "./EditFolderDialog";
|
|
import { useState } from "react";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
|
|
interface FolderCardProps {
|
|
folder: Folder;
|
|
isSelected: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
function FolderCard({ folder, isSelected, onClick }: FolderCardProps) {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={onClick}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
className={cn(
|
|
"relative flex h-24 flex-col gap-3 rounded-lg border p-4 text-left transition-colors hover:border-blue-400",
|
|
isSelected
|
|
? "border-blue-400 bg-blue-50 ring-2 ring-blue-400/20 dark:bg-blue-950/20"
|
|
: "border-slate-200 bg-slate-elevation1 dark:border-slate-700",
|
|
)}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="mt-0.5">
|
|
<FileIcon className="h-5 w-5 text-blue-400" />
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-1">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<h3 className="truncate text-sm font-medium text-slate-900 dark:text-slate-100">
|
|
{folder.title}
|
|
</h3>
|
|
<div
|
|
onClick={(e) => e.stopPropagation()}
|
|
className={cn(
|
|
"flex gap-1 transition-opacity",
|
|
isHovered ? "opacity-100" : "opacity-0",
|
|
)}
|
|
>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
onClick={() => setIsEditDialogOpen(true)}
|
|
className="rounded p-1.5 text-slate-400 transition-colors hover:bg-slate-500/20 hover:text-slate-300"
|
|
aria-label="Edit folder"
|
|
>
|
|
<Pencil1Icon className="h-4 w-4" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Edit Folder</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
<DeleteFolderButton
|
|
folderId={folder.folder_id}
|
|
folderTitle={folder.title}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-slate-500 dark:text-slate-400">
|
|
{folder.workflow_count}{" "}
|
|
{folder.workflow_count === 1 ? "workflow" : "workflows"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<EditFolderDialog
|
|
open={isEditDialogOpen}
|
|
onOpenChange={setIsEditDialogOpen}
|
|
folder={folder}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export { FolderCard };
|