[V0_FILE]typescriptreact:file="app/page.tsx" import FileExplorer from "./components/FileExplorer" import Navbar from "./components/Navbar" import SearchBar from "./components/SearchBar" import UploadButton from "./components/UploadButton" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/Navbar.tsx" import Link from "next/link" export default function Navbar() { return ( ) } [V0_FILE]typescriptreact:file="app/components/SearchBar.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Search } from "lucide-react" import type React from "react" // Added import for React export default function SearchBar() { const [searchTerm, setSearchTerm] = useState("") const handleSearch = (e: React.FormEvent) => { e.preventDefault() // Implement search functionality here console.log("Searching for:", searchTerm) } return ( ) } [V0_FILE]typescriptreact:file="app/components/UploadButton.tsx" "use client" import { Upload } from "lucide-react" export default function UploadButton() { const handleUpload = () => { // Implement file upload functionality here console.log("File upload triggered") } return ( ) } [V0_FILE]typescriptreact:file="app/components/FileExplorer.tsx" "use client" import { useState } from "react" import { Folder, File, ChevronRight, ChevronDown } from "lucide-react" type FileSystemItem = { id: string name: string type: "file" | "folder" children?: FileSystemItem[] } const initialFileSystem: FileSystemItem[] = [ { id: "1", name: "Documents", type: "folder", children: [ { id: "2", name: "Report.docx", type: "file" }, { id: "3", name: "Spreadsheet.xlsx", type: "file" }, ], }, { id: "4", name: "Images", type: "folder", children: [ { id: "5", name: "Photo1.jpg", type: "file" }, { id: "6", name: "Photo2.png", type: "file" }, ], }, { id: "7", name: "Notes.txt", type: "file" }, ] function FileSystemItem({ item, level = 0 }: { item: FileSystemItem; level?: number }) { const [isOpen, setIsOpen] = useState(false) const toggleOpen = () => { if (item.type === "folder") { setIsOpen(!isOpen) } } return (

{item.type === "folder" && (isOpen ? : )} {item.type === "folder" ? : } {item.name}

{item.type === "folder" && isOpen && item.children && (

{item.children.map((child) => ( ))}

)}

) } export default function FileExplorer() { return (

File Explorer

{initialFileSystem.map((item) => ( ))}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This