"use client"; import { useState } from "react"; import { Search, Upload, Plus, Filter, List, MoreHorizontal, Bell, ChevronDown, FileText, ImageIcon, Video, Headphones, Archive, Clock, Folder, Settings, MessageCircle, HelpCircle, BarChart3, Menu } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; const fileTypeColors = { Documents: "bg-blue-500", Image: "bg-purple-500", Video: "bg-purple-300", Audio: "bg-yellow-500", ZIP: "bg-red-500" }; const sidebarItems = [ { icon: BarChart3, label: "Dashboard", active: true }, { icon: Clock, label: "Recent files" }, { icon: FileText, label: "Documents" }, { icon: ImageIcon, label: "Image" }, { icon: Video, label: "Videos" }, { icon: Headphones, label: "Audios" }, { icon: Archive, label: "Deleted files" } ]; const recentFiles = [ { name: "Campaign Analysis - Q3.docx", size: "2.7 MB", type: "Document", icon: FileText }, { name: "HR_meeting_notes_2024.docx", size: "8.4 MB", type: "Image", icon: FileText }, { name: "landscape_002.jpg", size: "4.2 MB", type: "Image", icon: ImageIcon } ]; const allFiles = [ { name: "Campaign Analysis - Q3.docx", owner: "Brooklyn Simmons", size: "2.7 MB", date: "Apr 14, 2024", icon: FileText }, { name: "rebrand_mockup_v2_20241025.jpg", owner: "Cameron Williamson", size: "6.7 MB", date: "Apr 14, 2024", icon: ImageIcon }, { name: "proposal_new_product_jdoe.docx", owner: "Brooklyn Simmons", size: "1.5 MB", date: "Apr 13, 2024", icon: FileText }, { name: "landscape_002.jpg", owner: "Esther Howard", size: "8.4 MB", date: "Apr 13, 2024", icon: ImageIcon }, { name: "sunset_beach_20241025.jpg", owner: "Cameron Williamson", size: "7.3 MB", date: "Apr 11, 2024", icon: ImageIcon }, { name: "social_media_report_20241025.docx", owner: "Leslie Alexander", size: "2.3 MB", date: "Apr 10, 2024", icon: FileText }, { name: "HR_meeting_notes_20241025.docx", owner: "Jenny Wilson", size: "3.1 MB", date: "Apr 10, 2024", icon: FileText }, { name: "interview_downtown_20241025.mp4", owner: "Brooklyn Simmons", size: "15.2 MB", date: "Apr 10, 2024", icon: Video }, { name: "project_files_backup_2024-11-05.zip", owner: "Cameron Williamson", size: "21.6 MB", date: "Apr 09, 2024", icon: Archive }, { name: "landscape_003.jpg", owner: "Esther Howard", size: "3.6 MB", date: "Apr 09, 2024", icon: ImageIcon } ]; const storageData = [ { type: "Documents", files: 42, size: "112.8 MB", icon: FileText }, { type: "Image", files: 75, size: "286.8 MB", icon: ImageIcon }, { type: "Video", files: 32, size: "639.2 MB", icon: Video }, { type: "Audio", files: 20, size: "23.6 MB", icon: Headphones }, { type: "ZIP", files: 14, size: "213.3 MB", icon: Archive } ]; export default function FileManagerDashboard() { const [searchQuery, setSearchQuery] = useState(""); const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); const [isStoragePanelOpen, setIsStoragePanelOpen] = useState(false); const SidebarContent = () => ( <> {/* Logo */}

File Manager

{/* Menu */}

{/* Other section */}

Other

); const StoragePanelContent = () => ( <> {/* Storage usage */} Storage usage

104.6 GB

of 256 GB

{storageData.map((item, index) => (

{item.type}

{item.files} Files | {item.size}

))}

{/* Upgrade section */}

Get more space for your files

Upgrade your account to pro to get more storage

); return (

{/* Main Content */}

{/* Header */}

setSearchQuery(e.target.value)} className="pl-10" />

Profile Settings Sign out

{/* Main Content Area */}

{/* All files header */}

All files

All of your files are displayed here

{/* Recently modified */}

Recently modified

{recentFiles.map((file, index) => (

{file.name}

{file.size} • {file.type}

))}

{/* All files section */}

All files

Documents

Image

Video

Audio

ZIP

{allFiles.map((file, index) => (

{file.name}

{file.owner} • {file.size} • {file.date}

))}

Name

Owner

File Size

Date modified

{allFiles.map((file, index) => (

{file.name}

{file.owner}

{file.size}

{file.date}

))}

); }