[V0_FILE]typescriptreact:file="ps2-menu.tsx" isMerged="true" 'use client' import { useState } from 'react' import { ChevronRight, Circle, X } from 'lucide-react' export default function PS2Menu() { const [selectedIndex, setSelectedIndex] = useState(null) return (

{/* Memory Card Header */}

Memory Card (PS2)/2

4,868 KB Free

Burnout Revenge

{/* Save Game Grid */}

{Array.from({ length: 15 }).map((_, index) => ( ))}

{/* Button Controls */}

Enter

Back

Options

) } [V0_FILE]typescriptreact:file="styles.tsx" isMerged="true" 'use client' import { createGlobalStyle } from 'styled-components' export const PS2Styles = createGlobalStyle` @font-face { font-family: 'PS2P'; src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); } .ps2-text { font-family: 'PS2P', monospace; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .ps2-icon { transition: all 0.2s ease; } .ps2-icon:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); } ` [V0_FILE]typescriptreact:file="layout.tsx" isMerged="true" import { PS2Styles } from './styles' export default function Layout({ children }: { children: React.ReactNode }) { return ( <> {children} ) } [V0_FILE]typescriptreact:file="page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useRef, useEffect } from "react" interface MenuItem { id: number title: string gifUrl: string } interface Position { x: number y: number } export default function PS2Menu() { const [items] = useState([ { id: 1, title: "Random", gifUrl: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/randommm-freddyuniverse-BeAcDv9Sj0pSSEOFhnB2FKuHYzIJnP.gif", }, { id: 2, title: "Pics", gifUrl: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/PhotoGallery-freddyuniverse-ZnICokrYxtfEURdHBqOE37pmqgKdUz.gif", }, { id: 3, title: "Support", gifUrl: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/money-freddyuniverse-uCdh0N8ivWucFPJNYBBonCyld2zWkr.gif", }, { id: 4, title: "Burn Book", gifUrl: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/burnbook-freddyuniverse-DWcG5CtXVnjaSo8TcHsTE2DKOn1eBs.gif", }, { id: 5, title: "Brain Games", gifUrl: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/braingames-freddyuniverse-ZwlXB3hvH6rz38LKLTiCVRpdLP1EbH.gif", }, { id: 6, title: "About Me", gifUrl: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/aboutme-freddyuniverse-NcbYrvtwIgA2kBNopkqqOccKXMe2QK.gif", }, ]) return (

{/* Header */}

Memory Card (PS2)/2

4,868 KB Free

Burnout Revenge

{/* Icons Grid */}

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

{/* Footer Controls */}

Enter

○

Back

△

Options

) } function DraggableBox({ item }: { item: MenuItem }) { const [isDragging, setIsDragging] = useState(false) const [position, setPosition] = useState({ x: 0, y: 0 }) const [origin, setOrigin] = useState({ x: 0, y: 0 }) const ref = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!isDragging) return const dx = e.clientX - origin.x const dy = e.clientY - origin.y setPosition({ x: dx, y: dy }) } const handleMouseUp = () => { setIsDragging(false) } if (isDragging) { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [isDragging, origin]) const handleMouseDown = (e: React.MouseEvent) => { setIsDragging(true) setOrigin({ x: e.clientX - position.x, y: e.clientY - position.y }) } return (

{item.title}

) }