[V0_FILE]typescriptreact:file="components/project-list.tsx" "use client" import { useState } from "react" const projects = [ { name: "Lumina", tag: null, description: "Light-based interaction study" }, { name: "Terrain Dashboard", tag: null, description: "Geographic data explorer" }, { name: "Forma", tag: null, description: "Generative shape playground" }, { name: "MicroType", tag: null, description: "Variable font specimen" }, { name: "Grain Studio", tag: null, description: "Texture generation toolkit" }, { name: "void.config", tag: null, description: "Developer settings interface" }, { name: "Kinetic Posters", tag: null, description: "Motion graphics archive" }, { name: "Waveform", tag: null, description: "Audio visualization engine" }, { name: "Orbit Run", tag: "game", description: "Endless gravity runner" }, { name: "Glass Maze", tag: "game", description: "Reflective puzzle experience" }, ] function ArrowIcon({ style }) { return ( ) } function ProjectRow({ project, index }) { const [isHovered, setIsHovered] = useState(false) return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {/* Title Group - Grid Row 1, Column 1 */} {project.name} {project.tag && ( [{project.tag}] )} {/* Meta text - Grid Row 1, Column 2 */} {project.description} {/* Divider - Grid Row 2, spans both columns */} ) } export default function ProjectList() { return ( <>

{/* Subtle left border accent */}

{/* Project list */}

{projects.map((project, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import ProjectList from "@/components/project-list" export default function Page() { return } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }

About

Tags

Share

About

Tags

Share

More from mosedesmoulins-9225

More Templates Like This

About

Tags

Share

About

Tags

Share

More from mosedesmoulins-9225

More Templates Like This