"use client"; import { Download, File, FileImage, FileText, MoreVertical, Search, Sparkles, Trash2, Upload, } from "lucide-react"; import { useRef, useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/components/ui/empty"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { cn } from "@/lib/utils"; export interface TeamFile { id: string; name: string; type: string; size: number; uploadedBy: { id: string; name: string; avatar?: string; }; uploadedAt: Date; tags?: string[]; aiAccessible?: boolean; url?: string; } export interface TeamFilesProps { files?: TeamFile[]; onUpload?: (files: File[]) => Promise; onDelete?: (fileId: string) => Promise; onDownload?: (fileId: string) => Promise; onToggleAIAccess?: (fileId: string, enabled: boolean) => Promise; className?: string; showSearch?: boolean; showTags?: boolean; maxSize?: number; } function formatBytes(bytes: number): string { if (bytes === 0) return "0 Bytes"; const k = 1024; const sizes = ["Bytes", "KB", "MB", "GB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`; } function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }).format(date); } function getFileIcon(type: string) { if (type.startsWith("image/")) { return FileImage; } if (type.includes("pdf") || type.includes("document")) { return FileText; } return File; } function getFileTypeLabel(type: string): string { if (type.startsWith("image/")) { return "Image"; } if (type.includes("pdf")) { return "PDF"; } if (type.includes("text")) { return "Text"; } return "File"; } export default function TeamFiles({ files = [], onUpload, onDelete, onDownload, onToggleAIAccess, className, showSearch = true, showTags = true, maxSize = 100 * 1024 * 1024, // 100MB default }: TeamFilesProps) { const [searchQuery, setSearchQuery] = useState(""); const [isDragging, setIsDragging] = useState(false); const fileInputRef = useRef(null); const filteredFiles = files.filter((file) => { if (!searchQuery.trim()) return true; const query = searchQuery.toLowerCase(); return ( file.name.toLowerCase().includes(query) || file.tags?.some((tag) => tag.toLowerCase().includes(query)) ); }); const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragging(true); }; const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); }; const handleDrop = async (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); const droppedFiles = Array.from(e.dataTransfer.files); const validFiles = droppedFiles.filter((file) => file.size <= maxSize); if (validFiles.length > 0) { await onUpload?.(validFiles); } }; const handleFileSelect = async (e: React.ChangeEvent) => { const selectedFiles = Array.from(e.target.files || []); const validFiles = selectedFiles.filter((file) => file.size <= maxSize); if (validFiles.length > 0) { await onUpload?.(validFiles); } if (fileInputRef.current) { fileInputRef.current.value = ""; } }; return (

Team Files {files.length} file{files.length !== 1 ? "s" : ""} shared with your team

{showSearch && ( setSearchQuery(e.target.value)} placeholder="Search files…" type="search" value={searchQuery} /> )}

{/* Upload Area */} {onUpload && (

Drag and drop files here, or{" "}

Max file size: {formatBytes(maxSize)}

)} {/* Files List */} {filteredFiles.length === 0 ? ( {searchQuery ? "No files found" : "No files yet"} ) : (

{filteredFiles.map((file, idx) => { const Icon = getFileIcon(file.type); return (

{file.name} {file.aiAccessible && ( AI Accessible )}

{getFileTypeLabel(file.type)} {formatBytes(file.size)} Uploaded by {file.uploadedBy.name} on{" "} {formatDate(file.uploadedAt)}

{showTags && file.tags && file.tags.length > 0 && (

{file.tags.map((tag) => ( {tag} ))}

)}

{onDownload && ( onDownload(file.id)} > Download )} {onToggleAIAccess && ( onToggleAIAccess(file.id, !file.aiAccessible) } > {file.aiAccessible ? "Disable AI Access" : "Enable AI Access"} )} {onDelete && ( <> onDelete(file.id)} variant="destructive" > Delete )}

); })}

)}

); }

Example Usage