[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Music player website *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/dbijkonline9c06-3634s-projects/v0-music-player-website) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/HvVm9NanVvd) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/dbijkonline9c06-3634s-projects/v0-music-player-website](https://vercel.com/dbijkonline9c06-3634s-projects/v0-music-player-website)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/HvVm9NanVvd](https://v0.app/chat/projects/HvVm9NanVvd)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated to dark neon theme with electric colors */ --background: oklch(0.08 0 0); /* #0a0a0a - Deep black background */ --foreground: oklch(0.95 0 0); /* #f0f0f0 - Bright white text */ --card: oklch(0.12 0 0); /* #1a1a1a - Dark cards with slight lift */ --card-foreground: oklch(0.95 0 0); /* #f0f0f0 - Card text */ --popover: oklch(0.12 0 0); /* #1a1a1a - Popover background */ --popover-foreground: oklch(0.95 0 0); /* #f0f0f0 - Popover text */ --primary: oklch(0.7 0.35 195); /* #00d4ff - Electric cyan primary */ --primary-foreground: oklch(0.08 0 0); /* #0a0a0a - Dark text on primary */ --secondary: oklch(0.75 0.4 320); /* #ff00ff - Hot pink accent */ --secondary-foreground: oklch(0.08 0 0); /* #0a0a0a - Dark text on secondary */ --muted: oklch(0.25 0 0); /* #333333 - Muted elements */ --muted-foreground: oklch(0.7 0 0); /* #b3b3b3 - Muted text */ --accent: oklch(0.8 0.4 120); /* #00ff88 - Neon green accent */ --accent-foreground: oklch(0.08 0 0); /* #0a0a0a - Dark text on accent */ --destructive: oklch(0.7 0.4 0); /* #ff3333 - Neon red for destructive */ --destructive-foreground: oklch(0.08 0 0); /* Dark text on destructive */ --border: oklch(0.3 0.2 195); /* #1a4d5c - Subtle cyan border */ --input: oklch(0.15 0 0); /* #262626 - Input background */ --ring: oklch(0.7 0.35 195); /* #00d4ff - Electric cyan focus ring */ --chart-1: oklch(0.7 0.35 195); /* Electric cyan */ --chart-2: oklch(0.75 0.4 320); /* Hot pink */ --chart-3: oklch(0.8 0.4 120); /* Neon green */ --chart-4: oklch(0.75 0.4 280); /* Electric purple */ --chart-5: oklch(0.7 0.4 60); /* Electric yellow */ --radius: 0.5rem; --sidebar: oklch(0.08 0 0); /* #0a0a0a - Sidebar background */ --sidebar-foreground: oklch(0.95 0 0); /* #f0f0f0 - Sidebar text */ --sidebar-primary: oklch(0.7 0.35 195); /* #00d4ff - Sidebar primary */ --sidebar-primary-foreground: oklch(0.08 0 0); /* Dark text on sidebar primary */ --sidebar-accent: oklch(0.75 0.4 320); /* #ff00ff - Sidebar accent */ --sidebar-accent-foreground: oklch(0.08 0 0); /* Dark text on sidebar accent */ --sidebar-border: oklch(0.3 0.2 195); /* #1a4d5c - Sidebar border */ --sidebar-ring: oklch(0.7 0.35 195); /* #00d4ff - Sidebar focus ring */ } .dark { /* Dark mode uses same neon colors for consistency */ --background: oklch(0.08 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.7 0.35 195); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.75 0.4 320); --secondary-foreground: oklch(0.08 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.8 0.4 120); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.7 0.4 0); --destructive-foreground: oklch(0.08 0 0); --border: oklch(0.3 0.2 195); --input: oklch(0.15 0 0); --ring: oklch(0.7 0.35 195); --chart-1: oklch(0.7 0.35 195); --chart-2: oklch(0.75 0.4 320); --chart-3: oklch(0.8 0.4 120); --chart-4: oklch(0.75 0.4 280); --chart-5: oklch(0.7 0.4 60); --sidebar: oklch(0.08 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.7 0.35 195); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.75 0.4 320); --sidebar-accent-foreground: oklch(0.08 0 0); --sidebar-border: oklch(0.3 0.2 195); --sidebar-ring: oklch(0.7 0.35 195); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Added neon glow effects for enhanced cyberpunk aesthetic */ .neon-glow { box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor; } .neon-text { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor; } .neon-border { border: 1px solid currentColor; box-shadow: 0 0 5px currentColor; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Playfair_Display, Source_Sans_3 } from "next/font/google" import "./globals.css" const playfairDisplay = Playfair_Display({ subsets: ["latin"], display: "swap", variable: "--font-playfair", weight: ["400", "700"], }) const sourceSans = Source_Sans_3({ subsets: ["latin"], display: "swap", variable: "--font-source-sans", weight: ["400", "600"], }) export const metadata: Metadata = { title: "StreamHub - All-in-One Entertainment", description: "Your ultimate destination for music and movies", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { Sidebar } from "@/components/sidebar" import { MusicPlayer } from "@/components/music-player" import { ContentBrowser } from "@/components/content-browser" import { MusicSearch } from "@/components/music-search" import { MoviesBrowser } from "@/components/movies-browser" import { DiscoveryDashboard } from "@/components/discovery-dashboard" import { useState } from "react" export default function HomePage() { const [activeSection, setActiveSection] = useState("home") const renderContent = () => { switch (activeSection) { case "home": return case "search": return case "music": return case "movies": return case "favorites": return (

Your Favorites

Your liked songs and saved movies will appear here.

) case "recent": return (

Recently Played

Your recently played content will appear here.

) case "playlists": return (

My Playlists

Your created playlists will appear here.

) case "downloads": return (

Downloads

Your downloaded content for offline viewing will appear here.

) case "profile": return (

Profile

Manage your account settings and preferences.

) case "settings": return (

Settings

Customize your StreamHub experience.

) default: return } } return (

{/* Sidebar Navigation */} {/* Main Content Area */}

{/* Content Area */}

{renderContent()}

{/* Music Player - Fixed at bottom */}

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/content-browser.tsx" "use client" import { MusicSearch } from "./music-search" import { MoviesBrowser } from "./movies-browser" import { DiscoveryDashboard } from "./discovery-dashboard" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export function ContentBrowser() { return (

Discover Music Movies & Series

) } [V0_FILE]typescriptreact:file="components/discovery-dashboard.tsx" "use client" import { Play, Clock, TrendingUp, Heart, Shuffle, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { useState } from "react" export function DiscoveryDashboard() { const [currentTime, setCurrentTime] = useState(new Date().getHours()) const getGreeting = () => { if (currentTime < 12) return "Good morning" if (currentTime < 18) return "Good afternoon" return "Good evening" } const continueWatching = [ { id: 1, title: "Stranger Things", type: "series", episode: "S4 E7", progress: 65, thumbnail: "/stranger-things-poster.png", duration: "42 min left", }, { id: 2, title: "The Batman", type: "movie", progress: 23, thumbnail: "/batman-poster.png", duration: "2h 15m left", }, { id: 3, title: "Wednesday", type: "series", episode: "S1 E3", progress: 89, thumbnail: "/wednesday-poster.png", duration: "5 min left", }, ] const recentlyPlayed = [ { id: 1, title: "Blinding Lights", artist: "The Weeknd", album: "After Hours", thumbnail: "/neon-synthwave-album-cover.png", duration: "3:20", }, { id: 2, title: "Watermelon Sugar", artist: "Harry Styles", album: "Fine Line", thumbnail: "/colorful-album-cover.png", duration: "2:54", }, { id: 3, title: "Levitating", artist: "Dua Lipa", album: "Future Nostalgia", thumbnail: "/disco-album-cover.png", duration: "3:23", }, ] const trendingContent = [ { id: 1, title: "House of the Dragon", type: "series", rating: "8.5", genre: "Fantasy", thumbnail: "/hotd-poster.png", isNew: true, }, { id: 2, title: "Top Gun: Maverick", type: "movie", rating: "8.3", genre: "Action", thumbnail: "/topgun-poster.png", isNew: false, }, { id: 3, title: "The Bear", type: "series", rating: "8.7", genre: "Comedy", thumbnail: "/bear-poster.png", isNew: true, }, { id: 4, title: "Avatar: The Way of Water", type: "movie", rating: "7.6", genre: "Sci-Fi", thumbnail: "/avatar-poster.png", isNew: false, }, ] const personalizedPlaylists = [ { id: 1, name: "Your Daily Mix", description: "Based on your recent listening", trackCount: 50, thumbnail: "/playlist-daily-mix.png", }, { id: 2, name: "Chill Vibes", description: "Perfect for relaxing", trackCount: 32, thumbnail: "/playlist-chill.png", }, { id: 3, name: "Workout Hits", description: "High energy tracks", trackCount: 28, thumbnail: "/playlist-workout.png", }, ] return (

{/* Welcome Header */}

{getGreeting()}

Welcome back to StreamHub. Here's what's waiting for you.

{/* Quick Actions */}

Liked Songs

127 songs

Shuffle Play

All music

Recently Played

Jump back in

Continue Watching

{continueWatching.map((item) => (

{item.title}

{item.episode && `${item.episode} • `} {item.duration}

))}

{/* Recently Played Music */}

Recently Played

{recentlyPlayed.map((track) => (

{track.title}

{track.artist}

{track.duration}

))}

{/* Personalized Playlists */}

Made for You

{personalizedPlaylists.map((playlist) => (

{playlist.name}

{playlist.description}

{playlist.trackCount} songs

))}

{/* Trending Content */}

Trending Now

{trendingContent.map((item) => (

{item.isNew && NEW}

{item.title}

{item.type} • {item.genre}

))}

) } [V0_FILE]typescriptreact:file="components/movies-browser.tsx" "use client" import { Search, Play, Plus, Info, Star, Calendar, Clock } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { useState } from "react" export function MoviesBrowser() { const [searchQuery, setSearchQuery] = useState("") const [selectedCategory, setSelectedCategory] = useState("all") const categories = [ { id: "all", name: "All" }, { id: "trending", name: "Trending" }, { id: "movies", name: "Movies" }, { id: "series", name: "TV Series" }, { id: "action", name: "Action" }, { id: "comedy", name: "Comedy" }, { id: "drama", name: "Drama" }, { id: "sci-fi", name: "Sci-Fi" }, ] const featuredContent = { title: "Stranger Things", description: "When a young boy vanishes, a small town uncovers a mystery involving secret experiments, terrifying supernatural forces, and one strange little girl.", year: "2024", rating: "8.7", duration: "4 Seasons", genre: "Sci-Fi, Drama, Horror", thumbnail: "/stranger-things-poster.png", backdrop: "/stranger-things-backdrop.jpg", } const contentGrid = [ { id: 1, title: "The Batman", type: "Movie", year: "2024", rating: "8.2", duration: "2h 56m", genre: "Action, Crime", thumbnail: "/batman-poster.png", isNew: true, }, { id: 2, title: "Wednesday", type: "Series", year: "2024", rating: "8.1", duration: "2 Seasons", genre: "Comedy, Horror", thumbnail: "/wednesday-poster.png", isNew: true, }, { id: 3, title: "Top Gun: Maverick", type: "Movie", year: "2024", rating: "8.3", duration: "2h 10m", genre: "Action, Drama", thumbnail: "/topgun-poster.png", isNew: false, }, { id: 4, title: "House of the Dragon", type: "Series", year: "2024", rating: "8.5", duration: "2 Seasons", genre: "Fantasy, Drama", thumbnail: "/hotd-poster.png", isNew: true, }, { id: 5, title: "Avatar: The Way of Water", type: "Movie", year: "2024", rating: "7.6", duration: "3h 12m", genre: "Sci-Fi, Adventure", thumbnail: "/avatar-poster.png", isNew: false, }, { id: 6, title: "The Bear", type: "Series", year: "2024", rating: "8.7", duration: "3 Seasons", genre: "Comedy, Drama", thumbnail: "/bear-poster.png", isNew: true, }, ] const filteredContent = contentGrid.filter((item) => { const matchesSearch = item.title.toLowerCase().includes(searchQuery.toLowerCase()) const matchesCategory = selectedCategory === "all" || selectedCategory === "trending" || (selectedCategory === "movies" && item.type === "Movie") || (selectedCategory === "series" && item.type === "Series") || item.genre.toLowerCase().includes(selectedCategory) return matchesSearch && matchesCategory }) return (

{/* Search and Filters */}

Movies & Series

Discover the latest releases and trending content

setSearchQuery(e.target.value)} className="pl-10 bg-input border-border" />

{/* Category Filters */}

{categories.map((category) => ( ))}

{/* Featured Content Hero */} {!searchQuery && selectedCategory === "all" && (

{featuredContent.title}

{featuredContent.rating}

{featuredContent.year}

{featuredContent.duration}

{featuredContent.description}

)} {/* Content Grid */}

{searchQuery ? `Search Results (${filteredContent.length})` : selectedCategory === "all" ? "All Content" : categories.find((c) => c.id === selectedCategory)?.name}

{filteredContent.map((item) => (

{item.isNew && NEW}

{item.title}

{item.type} {item.year}

{item.rating}

• {item.duration}

))}

{filteredContent.length === 0 && (

No content found matching your criteria.

)}

{/* OTT Platform Releases */}

Latest OTT Releases

{[ { platform: "Netflix", title: "Glass Onion", type: "Movie", date: "Dec 2024" }, { platform: "Disney+", title: "The Mandalorian S4", type: "Series", date: "Jan 2025" }, { platform: "Prime Video", title: "The Boys S5", type: "Series", date: "Feb 2025" }, { platform: "HBO Max", title: "The Last of Us S2", type: "Series", date: "Mar 2025" }, { platform: "Apple TV+", title: "Foundation S3", type: "Series", date: "Apr 2025" }, { platform: "Hulu", title: "Only Murders S4", type: "Series", date: "May 2025" }, ].map((release, index) => (

{release.platform} {release.date}

{release.title}

{release.type}

))}

) } [V0_FILE]typescriptreact:file="components/music-player.tsx" "use client" import { Play, Pause, SkipBack, SkipForward, Volume2, Shuffle, Repeat, Heart, MoreHorizontal, Maximize2, } from "lucide-react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { useState } from "react" export function MusicPlayer() { const [isPlaying, setIsPlaying] = useState(false) const [progress, setProgress] = useState([30]) const [volume, setVolume] = useState([75]) const [isLiked, setIsLiked] = useState(false) const [isShuffled, setIsShuffled] = useState(false) const [repeatMode, setRepeatMode] = useState(0) // 0: off, 1: all, 2: one const currentTrack = { title: "Blinding Lights", artist: "The Weeknd", album: "After Hours", duration: "3:20", currentTime: "1:23", albumArt: "/neon-synthwave-album-cover.png", } const handleRepeatToggle = () => { setRepeatMode((prev) => (prev + 1) % 3) } return (

{/* Currently Playing - Enhanced with better album art */}

{currentTrack.title}

{currentTrack.artist}

{/* Player Controls - Enhanced with better styling */}

{/* Progress Bar - Enhanced with better styling */}

{currentTrack.currentTime}

{currentTrack.duration}

{/* Volume Control - Enhanced with better layout */}

) } [V0_FILE]typescriptreact:file="components/music-search.tsx" "use client" import { Search, Mic, X, MoreHorizontal } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { useState } from "react" export function MusicSearch() { const [searchQuery, setSearchQuery] = useState("") const [isSearching, setIsSearching] = useState(false) const searchResults = [ { id: 1, title: "Blinding Lights", artist: "The Weeknd", album: "After Hours", duration: "3:20", thumbnail: "/synthwave-album-cover.png", }, { id: 2, title: "Watermelon Sugar", artist: "Harry Styles", album: "Fine Line", duration: "2:54", thumbnail: "/colorful-album-cover.png", }, { id: 3, title: "Levitating", artist: "Dua Lipa", album: "Future Nostalgia", duration: "3:23", thumbnail: "/disco-album-cover.png", }, ] const handleSearch = (query: string) => { setSearchQuery(query) setIsSearching(query.length > 0) } return (

{/* Search Header */}

Search Music

Find your favorite songs and artists

{/* Search Input */}

handleSearch(e.target.value)} className="pl-10 pr-20 h-12 bg-input border-border" />

{searchQuery && ( )}

{/* Search Results */} {isSearching && (

Search Results

{searchResults.map((track) => (

{track.title}

{track.artist} • {track.album}

{track.duration}

))}

)} {/* Popular Searches */} {!isSearching && (

Popular Right Now

{["Pop Hits", "Rock Classics", "Hip Hop", "Electronic", "Indie", "Jazz", "Classical", "Country"].map( (genre) => (

{genre}

), )}

)}

) } [V0_FILE]typescriptreact:file="components/responsive-layout.tsx" "use client" import type React from "react" import { Menu } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Sidebar } from "./sidebar" import { useState } from "react" interface ResponsiveLayoutProps { children: React.ReactNode activeSection: string onSectionChange: (section: string) => void } export function ResponsiveLayout({ children, activeSection, onSectionChange }: ResponsiveLayoutProps) { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) return (

{/* Desktop Sidebar */}

{/* Mobile Layout */}

{/* Mobile Header */}

StreamHub

{ onSectionChange(section) setIsMobileMenuOpen(false) }} />

{/* Main Content */}

{children}

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" "use client" import { Home, Music, Film, Search, Heart, Clock, User, Settings, Download, List } from "lucide-react" import { Button } from "@/components/ui/button" import { useState } from "react" interface SidebarProps { activeSection?: string onSectionChange?: (section: string) => void } export function Sidebar({ activeSection = "home", onSectionChange }: SidebarProps) { const [currentSection, setCurrentSection] = useState(activeSection) const handleSectionChange = (section: string) => { setCurrentSection(section) onSectionChange?.(section) } const menuItems = [ { id: "home", icon: Home, label: "Home" }, { id: "search", icon: Search, label: "Search" }, { id: "music", icon: Music, label: "Music" }, { id: "movies", icon: Film, label: "Movies & Series" }, ] const libraryItems = [ { id: "favorites", icon: Heart, label: "Favorites" }, { id: "recent", icon: Clock, label: "Recently Played" }, { id: "playlists", icon: List, label: "My Playlists" }, { id: "downloads", icon: Download, label: "Downloads" }, ] const accountItems = [ { id: "profile", icon: User, label: "Profile" }, { id: "settings", icon: Settings, label: "Settings" }, ] return (

{/* Logo */}

StreamHub

All-in-One Entertainment

{/* Main Navigation */}

{/* Primary Navigation */} {/* Purple accent line */}

{/* Library Section */}

Your Library

{/* Recently Created Playlists */}

Recently Created

{["My Favorites 2024", "Chill Vibes", "Workout Mix"].map((playlist) => ( ))}

{/* Account Section */}

{accountItems.map((item) => ( ))}

{/* User Profile Card */}

John Doe

Premium User

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "span" return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "button" return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps) { const _values = React.useMemo( () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [value, defaultValue, min, max] ) return ( {Array.from({ length: _values.length }, (_, index) => ( ))} ) } export { Slider } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" function Tabs({ className, ...props }: React.ComponentProps) { return ( ) } function TabsList({ className, ...props }: React.ComponentProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ) } export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/avatar-poster.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/s74WqQGadaQyyT-oh0cEvp/public/avatar-poster.png" [V0_FILE]png:file="public/batman-poster.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/t6SsUkToFlKklph1G43TUq/public/batman-poster.png" [V0_FILE]png:file="public/bear-poster.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/_XolhPymmNd7KzGrfvFhar/public/bear-poster.png" [V0_FILE]png:file="public/colorful-album-cover.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/fdVdgw8NogkHG7aLSpgnop/public/colorful-album-cover.png" [V0_FILE]png:file="public/disco-album-cover.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/JX1VekPYN9-bYK0JLTu_1J/public/disco-album-cover.png" [V0_FILE]png:file="public/hotd-poster.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/WYNkU5wGZ4fshy72Kasvi0/public/hotd-poster.png" [V0_FILE]png:file="public/neon-synthwave-album-cover.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/8KYYyg1yuedrl6n1gBY4T8/public/neon-synthwave-album-cover.png" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" [V0_FILE]png:file="public/stranger-things-poster.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/urzoMj38BwqoHAfaBD4eag/public/stranger-things-poster.png" [V0_FILE]png:file="public/synthwave-album-cover.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/lI0A78B-W68ZdXIRF3RoHA/public/synthwave-album-cover.png" [V0_FILE]png:file="public/topgun-poster.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/hNz_xpeGvrbvNV2tPQIbp9/public/topgun-poster.png" [V0_FILE]png:file="public/wednesday-poster.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_yR2RHOiLTsLA1bVyfdZNCluj339H/M9sJGWuKs1E-mWGa_2xMuI/public/wednesday-poster.png"

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This