[V0_FILE]json:file="package.json" isMerged="true" { "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.3", "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": "^0.9.9", "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" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import { Toaster } from 'sonner' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Modern Music Player', description: 'A minimalist music player app', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/settings-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { Spinner } from '@/components/ui/spinner' import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, } from '@/components/ui/field' import { Input } from '@/components/ui/input' import { toast } from 'sonner' interface SettingsFormProps { onCancel: () => void } export function SettingsForm({ onCancel }: SettingsFormProps) { const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const formData = new FormData(e.currentTarget) const name = formData.get('name') as string await new Promise(resolve => setTimeout(resolve, 500)) console.log('[v0] Settings submitted:', { name }) toast.info('TODO: Add backend logic', { description: 'Profile settings will be saved once the backend is connected.', }) } finally { setIsSubmitting(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/playback-controls.tsx" isEdit="true" isMerged="true" 'use client' import { useEffect, useState } from 'react' import { Play, Pause, SkipBack, SkipForward, Volume2 } from 'lucide-react' import { Button } from '@/components/ui/button' import { Slider } from '@/components/ui/slider' interface Track { id: number title: string artist: string duration: string } interface PlaybackControlsProps { currentTrack?: Track isPlaying: boolean onPlayPause: () => void onNext: () => void onPrevious: () => void } function durationToSeconds(duration: string): number { const parts = duration.split(':') const minutes = parseInt(parts[0], 10) const seconds = parseInt(parts[1], 10) return minutes * 60 + seconds } function formatTime(seconds: number): string { const mins = Math.floor(seconds / 60) const secs = Math.floor(seconds % 60) return `${mins}:${secs.toString().padStart(2, '0')}` } export function PlaybackControls({ currentTrack, isPlaying, onPlayPause, onNext, onPrevious }: PlaybackControlsProps) { const [currentTime, setCurrentTime] = useState(0) const [duration, setDuration] = useState(0) useEffect(() => { if (currentTrack) { const trackDuration = durationToSeconds(currentTrack.duration) setDuration(trackDuration) setCurrentTime(0) } }, [currentTrack?.id]) useEffect(() => { if (!isPlaying || !currentTrack) return const interval = setInterval(() => { setCurrentTime((prev) => { if (prev >= duration) { // Auto-advance to next track when current track ends onNext() return 0 } return prev + 1 }) }, 1000) return () => clearInterval(interval) }, [isPlaying, duration, currentTrack, onNext]) const handleProgressChange = (value: number[]) => { setCurrentTime(value[0]) } return (

{/* Left: Now Playing */}

{currentTrack ? ( <>

{currentTrack.title}

{currentTrack.artist}

) : (

No track playing

)}

{/* Center: Playback Controls + Duration Slider */}

{formatTime(currentTime)} {currentTrack ? formatTime(duration) : '0:00'}

{/* Right: Volume Control */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { Sidebar } from '@/components/sidebar' import { TrackTable } from '@/components/track-table' import { PlaybackControls } from '@/components/playback-controls' export default function MusicPlayerPage() { const [currentTrack, setCurrentTrack] = useState(null) const [isPlaying, setIsPlaying] = useState(false) const [searchQuery, setSearchQuery] = useState('') const tracks = [ { id: 1, title: 'Cornfield Chase', artist: 'Hans Zimmer', album: 'Interstellar (Original Motion Picture Soundtrack)', duration: '2:07', artwork: '/placeholder.svg?height=32&width=32' }, { id: 2, title: 'Time', artist: 'Hans Zimmer', album: 'Inception (Music from the Motion Picture)', duration: '4:36', artwork: '/placeholder.svg?height=32&width=32' }, { id: 3, title: 'Now We Are Free', artist: 'Hans Zimmer & Lisa Gerrard', album: 'Gladiator (Music From The Motion Picture)', duration: '4:14', artwork: '/placeholder.svg?height=32&width=32' }, { id: 4, title: 'Circle of Life', artist: 'Hans Zimmer', album: 'The Lion King (Original Motion Picture Soundtrack)', duration: '3:59', artwork: '/placeholder.svg?height=32&width=32' }, { id: 5, title: "He's a Pirate", artist: 'Hans Zimmer & Klaus Badelt', album: 'Pirates of the Caribbean: The Curse of the Black Pearl (Original Motion Picture Soundtrack)', duration: '1:32', artwork: '/placeholder.svg?height=32&width=32' }, { id: 6, title: 'Day One', artist: 'Hans Zimmer', album: 'Interstellar (Original Motion Picture Soundtrack)', duration: '3:19', artwork: '/placeholder.svg?height=32&width=32' }, { id: 7, title: 'Honor Him', artist: 'Hans Zimmer', album: 'Gladiator (Music From The Motion Picture)', duration: '1:20', artwork: '/placeholder.svg?height=32&width=32' }, { id: 8, title: 'Elysium', artist: 'Hans Zimmer & Lisa Gerrard', album: 'Gladiator (Music From The Motion Picture)', duration: '2:41', artwork: '/placeholder.svg?height=32&width=32' }, { id: 9, title: 'Mountains', artist: 'Hans Zimmer', album: 'Interstellar (Original Motion Picture Soundtrack)', duration: '3:39', artwork: '/placeholder.svg?height=32&width=32' }, { id: 10, title: 'This Land', artist: 'Hans Zimmer', album: 'The Lion King (Original Motion Picture Soundtrack)', duration: '2:55', artwork: '/placeholder.svg?height=32&width=32' }, { id: 11, title: 'The Untold', artist: 'Secession Studios', album: 'The Untold', duration: '3:12', artwork: '/placeholder.svg?height=32&width=32' }, { id: 12, title: 'Demise of a Nation', artist: 'Secession Studios', album: 'The Untold', duration: '2:27', artwork: '/placeholder.svg?height=32&width=32' }, { id: 13, title: 'Darkness of Light', artist: 'Secession Studios', album: 'The Untold', duration: '2:25', artwork: '/placeholder.svg?height=32&width=32' }, { id: 14, title: "Lucifer's Waltz", artist: 'Secession Studios', album: 'The Untold', duration: '3:03', artwork: '/placeholder.svg?height=32&width=32' }, { id: 15, title: 'Heart of Darkness', artist: 'Secession Studios & Greg Dombrowski', album: 'Heart of Darkness', duration: '6:07', artwork: '/placeholder.svg?height=32&width=32' }, { id: 16, title: 'The Storm', artist: 'Secession Studios & Greg Dombrowski', album: 'Heroes', duration: '4:21', artwork: '/placeholder.svg?height=32&width=32' }, { id: 17, title: 'The Demand of Man', artist: 'Secession Studios', album: 'The Untold', duration: '2:34', artwork: '/placeholder.svg?height=32&width=32' }, { id: 18, title: 'The Untold II', artist: 'Secession Studios & Greg Dombrowski', album: 'The Untold II', duration: '5:18', artwork: '/placeholder.svg?height=32&width=32' }, { id: 19, title: 'Persecution', artist: 'Secession Studios', album: 'The Untold', duration: '2:39', artwork: '/placeholder.svg?height=32&width=32' }, { id: 20, title: 'To the Gallows', artist: 'Secession Studios & Greg Dombrowski', album: 'Bloodline', duration: '5:56', artwork: '/placeholder.svg?height=32&width=32' }, { id: 21, title: 'Symphony No. 3 in E-Flat Major, Op. 55 "Eroica"', artist: 'Ludwig van Beethoven', album: 'Beethoven: The Symphonies', duration: '50:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 22, title: 'Symphony No. 9 in D Minor, Op. 125 "Choral"', artist: 'Ludwig van Beethoven', album: 'Beethoven: Symphony No. 9', duration: '70:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 23, title: 'Piano Sonata No. 30 in E Major, Op. 109', artist: 'Ludwig van Beethoven', album: 'Beethoven: Late Piano Sonatas', duration: '20:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 24, title: 'String Quartet No. 14 in C-Sharp Minor, Op. 131', artist: 'Ludwig van Beethoven', album: 'Beethoven: Late String Quartets', duration: '45:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 25, title: 'Piano Concerto No. 5 in E-Flat Major, Op. 73 "Emperor"', artist: 'Ludwig van Beethoven', album: 'Beethoven: Piano Concertos', duration: '40:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 26, title: 'Symphony No. 7 in A Major, Op. 92', artist: 'Ludwig van Beethoven', album: 'Beethoven: The Symphonies', duration: '40:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 27, title: 'Fidelio, Op. 72 (Opera)', artist: 'Ludwig van Beethoven', album: 'Beethoven: Fidelio', duration: '150:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 28, title: 'Symphony No. 5 in C Minor, Op. 67', artist: 'Ludwig van Beethoven', album: 'Beethoven: The Symphonies', duration: '30:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 29, title: 'Violin Concerto in D Major, Op. 61', artist: 'Ludwig van Beethoven', album: 'Beethoven: Violin Concerto', duration: '40:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 30, title: 'Violin Sonata No. 9 in A Major, Op. 47 "Kreutzer"', artist: 'Ludwig van Beethoven', album: 'Beethoven: Violin Sonatas', duration: '35:00', artwork: '/placeholder.svg?height=32&width=32' }, ] const handleTrackClick = (trackId: number) => { if (currentTrack === trackId) { setIsPlaying(!isPlaying) } else { setCurrentTrack(trackId) setIsPlaying(true) } } const handleNext = () => { if (currentTrack === null) return const currentIndex = tracks.findIndex(t => t.id === currentTrack) if (currentIndex < tracks.length - 1) { setCurrentTrack(tracks[currentIndex + 1].id) setIsPlaying(true) } } const handlePrevious = () => { if (currentTrack === null) return const currentIndex = tracks.findIndex(t => t.id === currentTrack) if (currentIndex > 0) { setCurrentTrack(tracks[currentIndex - 1].id) setIsPlaying(true) } } const handleSearch = (query: string) => { setSearchQuery(query) } const filteredTracks = searchQuery.trim() === '' ? tracks : tracks.filter(track => track.title.toLowerCase().includes(searchQuery.toLowerCase()) || track.artist.toLowerCase().includes(searchQuery.toLowerCase()) || track.album.toLowerCase().includes(searchQuery.toLowerCase()) ) return (

t.id === currentTrack)} isPlaying={isPlaying} onPlayPause={() => setIsPlaying(!isPlaying)} onNext={handleNext} onPrevious={handlePrevious} />

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.99 0 0); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(0.99 0 0); --popover-foreground: oklch(0 0 0); --primary: oklch(0 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.94 0 0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.44 0 0); --accent: oklch(0.94 0 0); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.63 0.19 23.03); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0 0); --input: oklch(0.94 0 0); --ring: oklch(0 0 0); --chart-1: oklch(0.81 0.17 75.35); --chart-2: oklch(0.55 0.22 264.53); --chart-3: oklch(0.72 0 0); --chart-4: oklch(0.92 0 0); --chart-5: oklch(0.56 0 0); --sidebar: oklch(0.99 0 0); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0 0 0); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.94 0 0); --sidebar-accent-foreground: oklch(0 0 0); --sidebar-border: oklch(0.94 0 0); --sidebar-ring: oklch(0 0 0); --font-sans: var(--font-geist-sans), sans-serif; --font-serif: Georgia, serif; --font-mono: var(--font-geist-mono), monospace; --radius: 0.5rem; --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.18; --shadow-color: hsl(0 0% 0%); --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); --tracking-normal: 0em; --spacing: 0.25rem; } .dark { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.14 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0.18 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(1 0 0); --primary-foreground: oklch(0 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.23 0 0); --muted-foreground: oklch(0.72 0 0); --accent: oklch(0.32 0 0); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.69 0.2 23.91); --destructive-foreground: oklch(0 0 0); --border: oklch(0.26 0 0); --input: oklch(0.32 0 0); --ring: oklch(0.72 0 0); --chart-1: oklch(0.81 0.17 75.35); --chart-2: oklch(0.58 0.21 260.84); --chart-3: oklch(0.56 0 0); --chart-4: oklch(0.44 0 0); --chart-5: oklch(0.92 0 0); --sidebar: oklch(0.18 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(1 0 0); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.32 0 0); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.32 0 0); --sidebar-ring: oklch(0.72 0 0); --font-sans: var(--font-geist-sans), sans-serif; --font-serif: Georgia, serif; --font-mono: var(--font-geist-mono), monospace; --radius: 0.5rem; --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.18; --shadow-color: hsl(0 0% 0%); --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-sans: "Geist", sans-serif; --font-mono: "Geist Mono", monospace; --font-serif: var(--font-serif); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --shadow-2xs: var(--shadow-2xs); --shadow-xs: var(--shadow-xs); --shadow-sm: var(--shadow-sm); --shadow: var(--shadow); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg); --shadow-xl: var(--shadow-xl); --shadow-2xl: var(--shadow-2xl); /* Add soundwave animation definitions */ --animate-soundwave-1: soundwave-1 0.8s ease-in-out infinite; --animate-soundwave-2: soundwave-2 0.9s ease-in-out infinite; --animate-soundwave-3: soundwave-3 1s ease-in-out infinite; --animate-soundwave-4: soundwave-4 0.85s ease-in-out infinite; } @layer base { * { @apply border-zinc-800 outline-ring/50; } body { @apply bg-background text-foreground; } } /* Adding minimal custom scrollbar styles */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: oklch(0.4 0 0); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: oklch(0.5 0 0); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: oklch(0.4 0 0) transparent; } /* Add soundwave keyframe animations */ @keyframes soundwave-1 { 0%, 100% { height: 40%; } 50% { height: 80%; } } @keyframes soundwave-2 { 0%, 100% { height: 100%; } 50% { height: 50%; } } @keyframes soundwave-3 { 0%, 100% { height: 60%; } 50% { height: 90%; } } @keyframes soundwave-4 { 0%, 100% { height: 80%; } 50% { height: 40%; } } [V0_FILE]typescriptreact:file="components/soundwave.tsx" isEdit="true" isMerged="true" 'use client' export function Soundwave() { return (

) } [V0_FILE]typescriptreact:file="app/playlist/[id]/page.tsx" isMerged="true" 'use client' import { useState } from 'react' import { useParams } from 'next/navigation' import { Sidebar } from '@/components/sidebar' import { TrackTable } from '@/components/track-table' import { PlaybackControls } from '@/components/playback-controls' export default function PlaylistPage() { const params = useParams() const playlistId = params.id as string const [currentTrack, setCurrentTrack] = useState(null) const [isPlaying, setIsPlaying] = useState(false) const allTracks = [ { id: 1, title: 'Cornfield Chase', artist: 'Hans Zimmer', album: 'Interstellar (Original Motion Picture Soundtrack)', duration: '2:07', artwork: '/placeholder.svg?height=32&width=32' }, { id: 2, title: 'Time', artist: 'Hans Zimmer', album: 'Inception (Music from the Motion Picture)', duration: '4:36', artwork: '/placeholder.svg?height=32&width=32' }, { id: 3, title: 'Now We Are Free', artist: 'Hans Zimmer & Lisa Gerrard', album: 'Gladiator (Music From The Motion Picture)', duration: '4:14', artwork: '/placeholder.svg?height=32&width=32' }, { id: 4, title: 'Circle of Life', artist: 'Hans Zimmer', album: 'The Lion King (Original Motion Picture Soundtrack)', duration: '3:59', artwork: '/placeholder.svg?height=32&width=32' }, { id: 5, title: "He's a Pirate", artist: 'Hans Zimmer & Klaus Badelt', album: 'Pirates of the Caribbean: The Curse of the Black Pearl (Original Motion Picture Soundtrack)', duration: '1:32', artwork: '/placeholder.svg?height=32&width=32' }, { id: 6, title: 'Day One', artist: 'Hans Zimmer', album: 'Interstellar (Original Motion Picture Soundtrack)', duration: '3:19', artwork: '/placeholder.svg?height=32&width=32' }, { id: 7, title: 'Honor Him', artist: 'Hans Zimmer', album: 'Gladiator (Music From The Motion Picture)', duration: '1:20', artwork: '/placeholder.svg?height=32&width=32' }, { id: 8, title: 'Elysium', artist: 'Hans Zimmer & Lisa Gerrard', album: 'Gladiator (Music From The Motion Picture)', duration: '2:41', artwork: '/placeholder.svg?height=32&width=32' }, { id: 9, title: 'Mountains', artist: 'Hans Zimmer', album: 'Interstellar (Original Motion Picture Soundtrack)', duration: '3:39', artwork: '/placeholder.svg?height=32&width=32' }, { id: 10, title: 'This Land', artist: 'Hans Zimmer', album: 'The Lion King (Original Motion Picture Soundtrack)', duration: '2:55', artwork: '/placeholder.svg?height=32&width=32' }, { id: 11, title: 'The Untold', artist: 'Secession Studios', album: 'The Untold', duration: '3:12', artwork: '/placeholder.svg?height=32&width=32' }, { id: 12, title: 'Demise of a Nation', artist: 'Secession Studios', album: 'The Untold', duration: '2:27', artwork: '/placeholder.svg?height=32&width=32' }, { id: 13, title: 'Darkness of Light', artist: 'Secession Studios', album: 'The Untold', duration: '2:25', artwork: '/placeholder.svg?height=32&width=32' }, { id: 14, title: "Lucifer's Waltz", artist: 'Secession Studios', album: 'The Untold', duration: '3:03', artwork: '/placeholder.svg?height=32&width=32' }, { id: 15, title: 'Heart of Darkness', artist: 'Secession Studios & Greg Dombrowski', album: 'Heart of Darkness', duration: '6:07', artwork: '/placeholder.svg?height=32&width=32' }, { id: 16, title: 'The Storm', artist: 'Secession Studios & Greg Dombrowski', album: 'Heroes', duration: '4:21', artwork: '/placeholder.svg?height=32&width=32' }, { id: 17, title: 'The Demand of Man', artist: 'Secession Studios', album: 'The Untold', duration: '2:34', artwork: '/placeholder.svg?height=32&width=32' }, { id: 18, title: 'The Untold II', artist: 'Secession Studios & Greg Dombrowski', album: 'The Untold II', duration: '5:18', artwork: '/placeholder.svg?height=32&width=32' }, { id: 19, title: 'Persecution', artist: 'Secession Studios', album: 'The Untold', duration: '2:39', artwork: '/placeholder.svg?height=32&width=32' }, { id: 20, title: 'To the Gallows', artist: 'Secession Studios & Greg Dombrowski', album: 'Bloodline', duration: '5:56', artwork: '/placeholder.svg?height=32&width=32' }, { id: 21, title: 'Symphony No. 3 in E-Flat Major, Op. 55 "Eroica"', artist: 'Ludwig van Beethoven', album: 'Beethoven: The Symphonies', duration: '50:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 22, title: 'Symphony No. 9 in D Minor, Op. 125 "Choral"', artist: 'Ludwig van Beethoven', album: 'Beethoven: Symphony No. 9', duration: '70:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 23, title: 'Piano Sonata No. 30 in E Major, Op. 109', artist: 'Ludwig van Beethoven', album: 'Beethoven: Late Piano Sonatas', duration: '20:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 24, title: 'String Quartet No. 14 in C-Sharp Minor, Op. 131', artist: 'Ludwig van Beethoven', album: 'Beethoven: Late String Quartets', duration: '45:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 25, title: 'Piano Concerto No. 5 in E-Flat Major, Op. 73 "Emperor"', artist: 'Ludwig van Beethoven', album: 'Beethoven: Piano Concertos', duration: '40:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 26, title: 'Symphony No. 7 in A Major, Op. 92', artist: 'Ludwig van Beethoven', album: 'Beethoven: The Symphonies', duration: '40:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 27, title: 'Fidelio, Op. 72 (Opera)', artist: 'Ludwig van Beethoven', album: 'Beethoven: Fidelio', duration: '150:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 28, title: 'Symphony No. 5 in C Minor, Op. 67', artist: 'Ludwig van Beethoven', album: 'Beethoven: The Symphonies', duration: '30:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 29, title: 'Violin Concerto in D Major, Op. 61', artist: 'Ludwig van Beethoven', album: 'Beethoven: Violin Concerto', duration: '40:00', artwork: '/placeholder.svg?height=32&width=32' }, { id: 30, title: 'Violin Sonata No. 9 in A Major, Op. 47 "Kreutzer"', artist: 'Ludwig van Beethoven', album: 'Beethoven: Violin Sonatas', duration: '35:00', artwork: '/placeholder.svg?height=32&width=32' }, ] const getFilteredTracks = () => { if (playlistId === 'secession-studios') { return allTracks.filter(track => track.artist.includes('Secession Studios')) } else if (playlistId === 'beethoven') { return allTracks.filter(track => track.artist.includes('Beethoven')) } return allTracks } const tracks = getFilteredTracks() const handleTrackClick = (trackId: number) => { if (currentTrack === trackId) { setIsPlaying(!isPlaying) } else { setCurrentTrack(trackId) setIsPlaying(true) } } const handleNext = () => { if (!currentTrack || tracks.length === 0) return const currentIndex = tracks.findIndex(t => t.id === currentTrack) const nextIndex = (currentIndex + 1) % tracks.length setCurrentTrack(tracks[nextIndex].id) setIsPlaying(true) } const handlePrevious = () => { if (!currentTrack || tracks.length === 0) return const currentIndex = tracks.findIndex(t => t.id === currentTrack) const prevIndex = currentIndex === 0 ? tracks.length - 1 : currentIndex - 1 setCurrentTrack(tracks[prevIndex].id) setIsPlaying(true) } return (

t.id === currentTrack)} isPlaying={isPlaying} onPlayPause={() => setIsPlaying(!isPlaying)} tracks={tracks} onNext={handleNext} onPrevious={handlePrevious} />

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isMerged="true" 'use client' import { Search, Plus, MoreHorizontal, Settings } from 'lucide-react' import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, } from '@/components/ui/input-group' import Link from 'next/link' import { usePathname } from 'next/navigation' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Button } from '@/components/ui/button' import { useState } from 'react' import { toast } from 'sonner' interface SidebarProps { onSearch?: (query: string) => void } export function Sidebar({ onSearch }: SidebarProps) { const pathname = usePathname() const [searchQuery, setSearchQuery] = useState('') const isAllTracks = pathname === '/' const isSecession = pathname === '/playlist/secession-studios' const isBeethoven = pathname === '/playlist/beethoven' const isSettings = pathname === '/settings' const handleEdit = (playlistName: string) => { toast.info('TODO: Add backend logic', { description: `Edit functionality for "${playlistName}" playlist will be available once the backend is connected.`, }) } const handleDelete = (playlistName: string) => { toast.info('TODO: Add backend logic', { description: `Delete functionality for "${playlistName}" playlist will be available once the backend is connected.`, }) } const handleSearch = () => { if (onSearch) { onSearch(searchQuery) } } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handleSearch() } } return (

setSearchQuery(e.target.value)} onKeyDown={handleKeyDown} className="text-white placeholder:text-zinc-500" /> {/* All Tracks Section */}

Playlists

Secession Studios handleEdit('Secession Studios')} > Edit handleDelete('Secession Studios')} > Delete

Beethoven handleEdit('Beethoven')} > Edit handleDelete('Beethoven')} > Delete

Settings

) } [V0_FILE]typescriptreact:file="components/playlist-form.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { useRouter } from 'next/navigation' import { Field, FieldLabel, FieldDescription } from '@/components/ui/field' import { Input } from '@/components/ui/input' import { Button } from '@/components/ui/button' import { Spinner } from '@/components/ui/spinner' import { toast } from 'sonner' interface PlaylistFormData { title: string } interface PlaylistFormProps { onSuccess?: (data: PlaylistFormData) => void } export function PlaylistForm({ onSuccess }: PlaylistFormProps) { const router = useRouter() const [title, setTitle] = useState('') const [error, setError] = useState('') const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() // Validate if (!title.trim()) { setError('Playlist title is required') toast.error('Please enter a playlist title') return } setIsSubmitting(true) try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 500)) toast.success('TODO: Add backend logic to persist playlist', { description: 'Playlist will be created when backend is connected', duration: 3000, }) if (onSuccess) { onSuccess({ title }) } // Redirect to homepage setTimeout(() => { router.push('/') }, 1000) } catch (error) { toast.error('Failed to create playlist') console.error('[v0] Error creating playlist:', error) } finally { setIsSubmitting(false) } } const handleCancel = () => { router.push('/') } return ( ) } [V0_FILE]typescriptreact:file="components/song-form.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { useRouter } from 'next/navigation' import { Field, FieldLabel, FieldDescription } from '@/components/ui/field' import { Input } from '@/components/ui/input' import { Button } from '@/components/ui/button' import { Spinner } from '@/components/ui/spinner' import { toast } from 'sonner' interface SongFormData { songTitle: string artist: string album: string duration: string albumImage: string } interface SongFormProps { onSuccess?: (data: SongFormData) => void } export function SongForm({ onSuccess }: SongFormProps) { const router = useRouter() const [formData, setFormData] = useState({ songTitle: '', artist: '', album: '', duration: '', albumImage: '', }) const [errors, setErrors] = useState>>({}) const [isSubmitting, setIsSubmitting] = useState(false) const handleInputChange = (field: keyof SongFormData, value: string) => { setFormData(prev => ({ ...prev, [field]: value })) // Clear error when user starts typing if (errors[field]) { setErrors(prev => ({ ...prev, [field]: '' })) } } const validateForm = (): boolean => { const newErrors: Partial> = {} if (!formData.songTitle.trim()) { newErrors.songTitle = 'Song title is required' } if (!formData.artist.trim()) { newErrors.artist = 'Artist name is required' } if (!formData.album.trim()) { newErrors.album = 'Album name is required' } if (!formData.duration.trim()) { newErrors.duration = 'Duration is required' } else if (!/^\d{1,2}:\d{2}$/.test(formData.duration)) { newErrors.duration = 'Duration must be in format M:SS or MM:SS (e.g., 3:45)' } if (formData.albumImage && !formData.albumImage.startsWith('http')) { newErrors.albumImage = 'Album image must be a valid URL' } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) { toast.error('Please fix the errors in the form') return } setIsSubmitting(true) try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 500)) toast.success('TODO: Add backend logic to persist songs', { description: 'Song will be saved to your library when backend is connected', duration: 3000, }) if (onSuccess) { onSuccess(formData) } // Redirect to homepage setTimeout(() => { router.push('/') }, 1000) } catch (error) { toast.error('Failed to upload song') console.error('[v0] Error uploading song:', error) } finally { setIsSubmitting(false) } } const handleCancel = () => { router.push('/') } return (

Song Title * Enter the name of the track handleInputChange('songTitle', e.target.value)} placeholder="e.g., Time" className="bg-zinc-900 border-zinc-800 text-white placeholder:text-zinc-500 focus-visible:ring-zinc-700" /> {errors.songTitle && (

{errors.songTitle}

)} Artist * Who performed this track? handleInputChange('artist', e.target.value)} placeholder="e.g., Hans Zimmer" className="bg-zinc-900 border-zinc-800 text-white placeholder:text-zinc-500 focus-visible:ring-zinc-700" /> {errors.artist && (

{errors.artist}

)} Album * What album is this track from? handleInputChange('album', e.target.value)} placeholder="e.g., Inception" className="bg-zinc-900 border-zinc-800 text-white placeholder:text-zinc-500 focus-visible:ring-zinc-700" /> {errors.album && (

{errors.album}

)} Duration * Track length (M:SS or MM:SS) handleInputChange('duration', e.target.value)} placeholder="e.g., 4:36" className="bg-zinc-900 border-zinc-800 text-white placeholder:text-zinc-500 focus-visible:ring-zinc-700" /> {errors.duration && (

{errors.duration}

)} Album Image URL Provide a link to the album artwork handleInputChange('albumImage', e.target.value)} placeholder="https://example.com/image.jpg" className="bg-zinc-900 border-zinc-800 text-white placeholder:text-zinc-500 focus-visible:ring-zinc-700" /> {errors.albumImage && (

{errors.albumImage}

)}

) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { useRouter } from 'next/navigation' import { Sidebar } from '@/components/sidebar' import { SettingsForm } from '@/components/settings-form' import { SongForm } from '@/components/song-form' import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs' export default function SettingsPage() { const router = useRouter() const handleCancel = () => { router.push('/') } return (

Settings

Manage your profile and upload songs

Profile Upload

Upload a Song

Add a new song to your library

router.push('/')} />

) } [V0_FILE]typescriptreact:file="app/playlist/new/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useRouter } from 'next/navigation' import { Sidebar } from '@/components/sidebar' import { PlaylistForm } from '@/components/playlist-form' export default function CreatePlaylistPage() { const router = useRouter() return (

Create New Playlist

Give your playlist a name to get started

) } [V0_FILE]typescriptreact:file="components/track-table.tsx" isEdit="true" 'use client' import Image from 'next/image' import { MoreHorizontal } from 'lucide-react' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Button } from '@/components/ui/button' import { toast } from 'sonner' import { Soundwave } from './soundwave' interface Track { id: number title: string artist: string album: string duration: string artwork: string } interface TrackTableProps { tracks: Track[] currentTrack: number | null isPlaying: boolean onTrackClick: (trackId: number) => void } export function TrackTable({ tracks, currentTrack, isPlaying, onTrackClick }: TrackTableProps) { const handleEdit = (track: Track) => { toast.info('TODO: Add backend logic', { description: `Edit functionality for "${track.title}" will be available once the backend is connected.`, }) } const handleDelete = (track: Track) => { toast.info('TODO: Add backend logic', { description: `Delete functionality for "${track.title}" will be available once the backend is connected.`, }) } return (

{tracks.map((track, index) => ( ))}

#	Title	Artist	Album	Duration
{currentTrack === track.id && isPlaying ? ( ) : ( {index + 1} )}	onTrackClick(track.id)} > {track.title}	onTrackClick(track.id)} > {track.artist}	onTrackClick(track.id)} > {track.album}	onTrackClick(track.id)} > {track.duration}	{ e.stopPropagation() handleEdit(track) }} > Edit { e.stopPropagation() handleDelete(track) }} > Delete

) }

About

Tags

Share

About

Tags

Share

More from jefferypippitt

More Templates Like This