"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Separator } from "@/components/ui/separator"; import { Play, Pause, SkipBack, SkipForward, Volume2, Search, Heart, Shuffle, Repeat, Menu, Home, Library, Plus, User, X } from "lucide-react"; interface Playlist { id: string; title: string; followers: string; image: string; color: string; } interface Track { id: string; title: string; artist: string; duration: string; image: string; } const featuredPlaylists: Playlist[] = [ { id: "1", title: "Today's Top Hits", followers: "4,223,172 Followers", image: "/sunglasses-on-dark-background.png", color: "from-slate-900 to-slate-600" }, { id: "2", title: "Pop Hits", followers: "8,823,823 Followers", image: "/woman-in-pink-hat.png", color: "from-blue-500 to-blue-300" }, { id: "3", title: "Workout", followers: "1,611,732 Followers", image: "/fitness-workout-energy.png", color: "from-green-600 to-green-400" }, { id: "4", title: "Chill Hits", followers: "768,032 Followers", image: "/relaxing-sunset-vibes.png", color: "from-orange-500 to-orange-300" }, { id: "5", title: "Sad Feeling", followers: "2,122,820 Followers", image: "/melancholy-ocean-scene.png", color: "from-gray-600 to-gray-400" }, { id: "6", title: "Friday's Love Hits", followers: "827,783 Followers", image: "/romantic-silhouette-sunset.png", color: "from-rose-900 to-rose-700" } ]; const userPlaylists: Playlist[] = [ { id: "7", title: "All is R&B", followers: "56 Songs", image: "/letter-r-typography.png", color: "from-green-600 to-green-400" }, { id: "8", title: "This is Maroon 5", followers: "36 Songs", image: "/maroon-5-band-member.png", color: "from-black to-gray-800" }, { id: "9", title: "Acoustic Songs", followers: "41 Songs", image: "/acoustic-guitar-player.png", color: "from-blue-300 to-blue-100" }, { id: "10", title: "Fresh Songs", followers: "22 Songs", image: "/fresh-modern-artist.png", color: "from-orange-400 to-orange-200" }, { id: "11", title: "Classic Hits", followers: "44 Songs", image: "/vinyl-record-classic.png", color: "from-teal-600 to-teal-400" }, { id: "12", title: "Best Night Hits", followers: "52 Songs", image: "/night-city-lights-music.png", color: "from-indigo-900 to-indigo-700" } ]; const currentTrack: Track = { id: "1", title: "Shallow", artist: "Lady Gaga", duration: "4:56", image: "/lady-gaga-shallow-album-cover.png" }; export function MusicApp() { const [isPlaying, setIsPlaying] = useState(false); const [currentTime, setCurrentTime] = useState("1:24"); const [sidebarOpen, setSidebarOpen] = useState(false); return (

{/* Mobile Overlay */} {sidebarOpen && (

setSidebarOpen(false)} /> )} {/* Sidebar */}

Maise

{/* User Profile */}

Vladimir Raksha

Premium Plan

{/* Navigation */}

{/* Main Content */}

{/* Header */}

{/* Content */}

{/* Browse Section */}

Browse

{featuredPlaylists.map((playlist) => (

{playlist.title}

{playlist.followers}

))}

{/* My Playlists Section */}

My Playlists

{userPlaylists.map((playlist) => (

{playlist.title}

{playlist.followers}

))}

{/* More Like Lady Gaga Section */}

More Like Lady Gaga

{Array.from({ length: 6 }).map((_, i) => (

))}

{/* Music Player */}

{currentTrack.title}

{currentTrack.artist}

{currentTime}

{currentTrack.duration}

); }