"use client" import { useState } from "react" import { motion } from "framer-motion" import { Play, Pause, SkipBack, SkipForward, Volume2, Heart, Shuffle, Repeat, ListMusic, Music, } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { fadeIn, stagger, staggerItem, cardHover, cardHoverTarget, buttonTapTarget } from "@/lib/animations" const playlist = [ { id: 1, title: "Midnight Dreams", artist: "Luna Wave", duration: "3:45", playing: true }, { id: 2, title: "Electric Sunset", artist: "Neon Beats", duration: "4:12", playing: false }, { id: 3, title: "Ocean Breeze", artist: "Coastal Drift", duration: "3:28", playing: false }, { id: 4, title: "Urban Flow", artist: "City Lights", duration: "4:05", playing: false }, { id: 5, title: "Starlight Serenade", artist: "Cosmic Strings", duration: "5:30", playing: false }, { id: 6, title: "Golden Hour", artist: "Solar Drift", duration: "3:55", playing: false }, ] export default function MusicPlayer() { const [playing, setPlaying] = useState(false) return (

Now Playing

Your daily mix

24 tracks

Midnight Dreams

Luna Wave

1:32 3:45

Queue

{playlist.map((track) => (

{track.playing ? : track.id}

{track.title}

{track.artist}

{track.duration} ))}

) }

Music Player

Now Playing

Midnight Dreams

Queue

Now Playing

Midnight Dreams

Queue