From 698bb157f514c87fa4b2845983e643f9f9d173b4 Mon Sep 17 00:00:00 2001 From: "modeinspect-eu[bot]" <204106916+modeinspect-eu[bot]@users.noreply.github.com> Date: Mon, 12 May 2025 13:09:42 +0000 Subject: [PATCH] "Implemented responsive Spotify clone interface with sidebar navigation, main content area, and player controls, faithfully recreating core design elements with interactive components." --- src/app/layout.tsx | 4 +- src/app/page.tsx | 229 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 230 insertions(+), 3 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..ab3cd57 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -13,8 +13,8 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Spotify Clone", + description: "A Spotify clone built with Next.js, React, and Tailwind CSS", }; export default function RootLayout({ diff --git a/src/app/page.tsx b/src/app/page.tsx index 07a01d9..092b93e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,3 +1,230 @@ +"use client"; + +import { Home as HomeIcon, Search, Library, PlusSquare, Heart, Music2, PlayCircle, SkipBack, SkipForward, Volume2 } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { + SidebarProvider, + Sidebar, + SidebarHeader, + SidebarContent, + SidebarMenu, + SidebarMenuItem, + SidebarMenuButton, + SidebarGroup, + SidebarGroupLabel, + SidebarFooter, + SidebarSeparator, + SidebarInset, +} from '@/components/ui/sidebar'; + export default function Home() { - return (
); + // Mock data for playlists + const playlists = [ + { id: 1, name: "Liked Songs" }, + { id: 2, name: "Discover Weekly" }, + { id: 3, name: "Release Radar" }, + { id: 4, name: "Daily Mix 1" }, + { id: 5, name: "Daily Mix 2" }, + { id: 6, name: "Hot Hits" } + ]; + + // Mock data for recently played + const recentlyPlayed = [ + { id: 1, name: "High Hopes", artist: "Panic! At The Disco", cover: "https://placehold.co/50x50/29B67D/FFF" }, + { id: 2, name: "Bad Guy", artist: "Billie Eilish", cover: "https://placehold.co/50x50/1DB954/FFF" }, + { id: 3, name: "Industry Baby", artist: "Lil Nas X", cover: "https://placehold.co/50x50/3282F6/FFF" }, + { id: 4, name: "Levitating", artist: "Dua Lipa", cover: "https://placehold.co/50x50/FF5722/FFF" }, + { id: 5, name: "Stay", artist: "The Kid LAROI & Justin Bieber", cover: "https://placehold.co/50x50/FFAA00/FFF" }, + { id: 6, name: "good 4 u", artist: "Olivia Rodrigo", cover: "https://placehold.co/50x50/9747FF/FFF" } + ]; + + return ( + +
+ {/* Main layout with sidebar */} +
+ {/* Sidebar */} + + +
+

Spotify

+
+ + + {/* Navigation Menu */} + + + + + Home + + + + + + Search + + + + + + Your Library + + + + + + + {/* Playlists Section */} + +
+ Playlists + +
+ + + + + Liked Songs + + + + {playlists.slice(1).map(playlist => ( + + + + {playlist.name} + + + ))} + + + + + + {/* Main Content */} + + {/* Header */} +
+
+ + +
+
+ + +
+
+ + {/* Recently Played Section */} +
+

Recently played

+
+ {recentlyPlayed.map(item => ( +
+
+ {item.name} +
+ +
+
+

{item.name}

+

{item.artist}

+
+ ))} +
+
+ + {/* Made for You Section */} +
+

Made for you

+
+ {[1, 2, 3, 4].map(id => ( +
+
+ Playlist cover +
+ +
+
+

Daily Mix {id}

+

Personalized songs for you

+
+ ))} +
+
+ +
+ + {/* Player controls - fixed at bottom */} +
+
+ Current song +
+

Current Song

+

Artist Name

+
+ +
+ +
+
+ + + +
+
+ 1:23 +
+
+
+ 3:45 +
+
+ +
+ +
+
+
+
+
+
+ + ); }