import React, { useState } from 'react'; import { Play, Pause, SkipBack, SkipForward, Volume2, Heart, MoreHorizontal, Search, Home, Library, Plus, Download } from 'lucide-react'; const SpotifyClone = () => { const [isPlaying, setIsPlaying] = useState(false); const [currentSong, setCurrentSong] = useState({ title: "Blinding Lights", artist: "The Weeknd", album: "After Hours", duration: "3:20", progress: 45 }); const playlists = [ "Liked Songs", "Discover Weekly", "Release Radar", "Chill Vibes", "Workout Mix", "Road Trip", "Jazz Classics", "Indie Rock" ]; const recentlyPlayed = [ { title: "Daily Mix 1", subtitle: "The Weeknd, Dua Lipa, Billie Eilish", image: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&q=80" }, { title: "Discover Weekly", subtitle: "Your weekly mixtape", image: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=300&q=80" }, { title: "Release Radar", subtitle: "New releases for you", image: "https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=300&q=80" }, { title: "Chill Hits", subtitle: "Kick back to the best", image: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=300&q=80" } ]; const madeForYou = [ { title: "Daily Mix 2", subtitle: "Tame Impala, Glass Animals", image: "https://images.unsplash.com/photo-1518609878373-06d740f60d8b?w=300&q=80" }, { title: "Daily Mix 3", subtitle: "Arctic Monkeys, The Strokes", image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&q=80" }, { title: "Time Capsule", subtitle: "Songs from your past", image: "https://images.unsplash.com/photo-1506157786151-b8491531f063?w=300&q=80" }, { title: "On Repeat", subtitle: "Songs you can't stop", image: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&q=80" } ]; return (

{/* Sidebar */}

{/* Logo */}

Spotify

{/* Navigation */}

Home
Search
Your Library

{/* Create Playlist */}

{/* Liked Songs */}

{/* Download */}

{/* Playlists */}

{playlist}

{/* Main Content */}

{/* Top Bar */}

{/* Content Area */}

{/* Greeting */}

Good afternoon

{/* Recently Played Grid */}

{recentlyPlayed.map((item, index) => (

{item.title}

))}

{/* Made for You Section */}

Made for you

{madeForYou.map((item, index) => (

{item.title}

{item.subtitle}

))}

{/* Popular Playlists */}

Popular playlists

{recentlyPlayed.map((item, index) => (

{item.title}

{item.subtitle}

))}

{/* Now Playing Bar */}

{/* Song Info */}

{currentSong.title}

{currentSong.artist}

{/* Player Controls */}

1:23

{currentSong.duration}

{/* Volume Controls */}

); }; export default SpotifyClone;

Spotify UI Clone