[V0_FILE]typescriptreact:file="components/Sidebar.tsx" import { Home, Search, Library, PlusSquare, Heart, Download } from "lucide-react" import { ScrollArea } from "@/components/ui/scroll-area" const playlists = [ "Chill Vibes", "Workout Mix", "90s Throwback", "Indie Acoustic", "Focus Playlist", "Road Trip Tunes", "Rainy Day Jazz", "Summer Hits", "Classical Essentials", "Hip Hop Favorites", ] export function Sidebar() { return (

Spotify

Playlists

{playlist}

) } [V0_FILE]typescriptreact:file="components/MainContent.tsx" import { Play } from "lucide-react" import Image from "next/image" const songs = [ { title: "Bohemian Rhapsody", artist: "Queen", album: "A Night at the Opera", duration: "5:55" }, { title: "Stairway to Heaven", artist: "Led Zeppelin", album: "Led Zeppelin IV", duration: "8:02" }, { title: "Imagine", artist: "John Lennon", album: "Imagine", duration: "3:01" }, { title: "Smells Like Teen Spirit", artist: "Nirvana", album: "Nevermind", duration: "5:01" }, { title: "Billie Jean", artist: "Michael Jackson", album: "Thriller", duration: "4:54" }, ] export function MainContent() { return (

PLAYLIST

Daily Mix 1

Created by Spotify • 50 songs, 3 hr 25 min

{songs.map((song, index) => ( ))}

#	TITLE	ALBUM	DURATION
{index + 1}	{song.title} {song.artist}	{song.album}	{song.duration}

) } [V0_FILE]typescriptreact:file="components/PlayerControls.tsx" import { Play, SkipBack, SkipForward, Repeat, Shuffle, Volume2 } from "lucide-react" import Image from "next/image" export function PlayerControls() { return (

Song Title

Artist Name

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Sidebar } from "../components/Sidebar" import { MainContent } from "../components/MainContent" import { PlayerControls } from "../components/PlayerControls" export default function Home() { return (

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This