Spaces:
Build error
Build error
File size: 3,400 Bytes
a5871f0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
'use client';
import * as React from 'react';
import { Folder as FolderIcon, Share2 } from 'lucide-react';
import { Card, CardFooter } from '@/components/ui/card';
import type { Folder } from '@/app/api/files/route';
import { cn } from '@/lib/utils';
import { Checkbox } from './ui/checkbox';
import { Button } from './ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
import { ShareDialog } from './share-dialog';
interface FolderGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
folder: Folder;
onSelectFolder: (path: string) => void;
isSelected: boolean;
onSelectItem: (id: string, isSelected: boolean) => void;
isSelectionActive: boolean;
isPublicShare?: boolean;
}
export function FolderGridItem({ folder, onSelectFolder, isSelected, onSelectItem, isSelectionActive, isPublicShare, className, ...props }: FolderGridItemProps) {
const [isShareOpen, setIsShareOpen] = React.useState(false);
const handleCheckboxChange = (checked: boolean) => {
onSelectItem(folder.id, checked);
};
const handleCardClick = () => {
if (isSelectionActive) {
onSelectItem(folder.id, !isSelected);
} else {
onSelectFolder(folder.path);
}
};
const handleShareClick = (e: React.MouseEvent) => {
e.stopPropagation();
setIsShareOpen(true);
};
return (
<>
<Card
className={cn(
"group relative w-full aspect-square flex flex-col justify-center items-center cursor-pointer transition-all duration-200 hover:shadow-md",
isSelected && "border-primary shadow-lg scale-[1.02]",
className
)}
onClick={handleCardClick}
{...props}
>
<div className={cn("absolute top-2 right-2 z-10", !isSelectionActive && "hidden")} onClick={(e) => e.stopPropagation()}>
<Checkbox
checked={isSelected}
onCheckedChange={handleCheckboxChange}
aria-label={`Select folder ${folder.name}`}
/>
</div>
<div className="flex flex-col items-center justify-center flex-1">
<FolderIcon className="h-24 w-24 text-primary/70 group-hover:text-primary transition-colors" />
</div>
<CardFooter className="p-2 !pt-2 w-full flex-col items-start">
<p className="font-semibold text-sm truncate text-center w-full">{folder.name}</p>
<div className="w-full flex justify-end gap-1 mt-1">
{!isPublicShare && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleShareClick}>
<Share2 className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent><p>Share</p></TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
</CardFooter>
</Card>
{!isPublicShare && (
<ShareDialog
isOpen={isShareOpen}
onOpenChange={setIsShareOpen}
itemName={folder.name}
itemPath={folder.path}
itemType="folder"
/>
)}
</>
);
}
|