[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { Folder, Plus, Search, Upload } from "lucide-react" import { FileCard } from "@/components/file-card" import { FileUploadDialog } from "@/components/file-upload-dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" // Sample data const folders = [ { id: 1, name: "Documents", files: 24 }, { id: 2, name: "Images", files: 56 }, { id: 3, name: "Projects", files: 13 }, { id: 4, name: "Archives", files: 7 }, ] const recentFiles = [ { id: 1, name: "Project Proposal.pdf", type: "pdf", size: "2.4 MB", modified: "2 hours ago" }, { id: 2, name: "Budget 2025.xlsx", type: "xlsx", size: "1.8 MB", modified: "Yesterday" }, { id: 3, name: "Meeting Notes.docx", type: "docx", size: "842 KB", modified: "3 days ago" }, { id: 4, name: "Presentation.pptx", type: "pptx", size: "4.2 MB", modified: "1 week ago" }, { id: 5, name: "Logo Design.png", type: "png", size: "1.2 MB", modified: "2 weeks ago" }, { id: 6, name: "Client Contract.pdf", type: "pdf", size: "3.1 MB", modified: "3 weeks ago" }, ] export default function Home() { const [showUploadDialog, setShowUploadDialog] = useState(false) return (

{/* Header */}

LITHIC

{/* Sidebar */} {/* Main content */}

Recent Files

{recentFiles.map((file) => ( ))}

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/file-card.tsx" import { MoreVertical, FileText, FileImage, FileSpreadsheet, FileIcon as FilePresentationIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" interface FileCardProps { file: { id: number name: string type: string size: string modified: string } } export function FileCard({ file }: FileCardProps) { const getFileIcon = () => { switch (file.type) { case "pdf": return case "png": case "jpg": case "jpeg": return case "xlsx": return case "pptx": return default: return } } return (

{getFileIcon()}

{file.name}

Download Share Rename Delete

Type: .{file.type}

Size: {file.size}

Modified {file.modified}

) } [V0_FILE]typescriptreact:file="components/file-upload-dialog.tsx" "use client" import type React from "react" import { useState } from "react" import { Upload, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface FileUploadDialogProps { open: boolean onOpenChange: (open: boolean) => void } export function FileUploadDialog({ open, onOpenChange }: FileUploadDialogProps) { const [dragActive, setDragActive] = useState(false) const [files, setFiles] = useState([]) const handleDrag = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true) } else if (e.type === "dragleave") { setDragActive(false) } } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setDragActive(false) if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { const newFiles = Array.from(e.dataTransfer.files) setFiles((prev) => [...prev, ...newFiles]) } } const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { const newFiles = Array.from(e.target.files) setFiles((prev) => [...prev, ...newFiles]) } } const removeFile = (index: number) => { setFiles((prev) => prev.filter((_, i) => i !== index)) } return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { cn } from "@/lib/utils" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "LITHIC - Brutalist File Manager", description: "A file management interface inspired by brutalist architecture and geological formations", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 20 14.3% 4.1%; --card: 0 0% 100%; --card-foreground: 20 14.3% 4.1%; --popover: 0 0% 100%; --popover-foreground: 20 14.3% 4.1%; --primary: 24 9.8% 10%; --primary-foreground: 60 9.1% 97.8%; --secondary: 60 4.8% 95.9%; --secondary-foreground: 24 9.8% 10%; --muted: 60 4.8% 95.9%; --muted-foreground: 25 5.3% 44.7%; --accent: 60 4.8% 95.9%; --accent-foreground: 24 9.8% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 60 9.1% 97.8%; --border: 20 5.9% 90%; --input: 20 5.9% 90%; --ring: 24 9.8% 10%; --radius: 0rem; } .dark { --background: 20 14.3% 4.1%; --foreground: 60 9.1% 97.8%; --card: 20 14.3% 4.1%; --card-foreground: 60 9.1% 97.8%; --popover: 20 14.3% 4.1%; --popover-foreground: 60 9.1% 97.8%; --primary: 60 9.1% 97.8%; --primary-foreground: 24 9.8% 10%; --secondary: 12 6.5% 15.1%; --secondary-foreground: 60 9.1% 97.8%; --muted: 12 6.5% 15.1%; --muted-foreground: 24 5.4% 63.9%; --accent: 12 6.5% 15.1%; --accent-foreground: 60 9.1% 97.8%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 60 9.1% 97.8%; --border: 12 6.5% 15.1%; --input: 12 6.5% 15.1%; --ring: 24 5.7% 82.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, stone: { 50: "#fafaf9", 100: "#f5f5f4", 200: "#e7e5e4", 300: "#d6d3d1", 400: "#a8a29e", 500: "#78716c", 600: "#57534e", 700: "#44403c", 800: "#292524", 900: "#1c1917", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config

About

Tags

Share

More from scalableb2b

More Templates Like This

About

Tags

Share

About

Tags

Share

More from scalableb2b

More Templates Like This