673 lines
27 KiB
TypeScript
673 lines
27 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import { ThemeToggle } from '@/components/theme-toggle'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
|
|
import { Avatar, AvatarImage, AvatarFallback, AvatarGroup } from '@/components/ui/avatar'
|
|
import { Progress, CircularProgress, LoaderBar } from '@/components/ui/progress'
|
|
import { AudioPlayer, Equalizer } from '@/components/ui/audio-player'
|
|
import { Chat, Message, Presence } from '@/components/ui/chat'
|
|
import { StatCard, StatsGrid, XPBar, LeaderboardEntry } from '@/components/ui/stat-card'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import { Slider } from '@/components/ui/slider'
|
|
import { Label } from '@/components/ui/label'
|
|
|
|
// Section wrapper component
|
|
function Section({
|
|
title,
|
|
description,
|
|
children
|
|
}: {
|
|
title: string
|
|
description?: string
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<section className="py-12 border-b border-border last:border-b-0">
|
|
<div className="mb-8">
|
|
<p className="text-xs font-mono uppercase tracking-widest text-primary mb-2">
|
|
Component
|
|
</p>
|
|
<h2 className="text-2xl font-bold tracking-tight">{title}</h2>
|
|
{description && (
|
|
<p className="text-muted-foreground mt-1">{description}</p>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
// Preview box
|
|
function PreviewBox({
|
|
label,
|
|
children,
|
|
className = ''
|
|
}: {
|
|
label?: string
|
|
children: React.ReactNode
|
|
className?: string
|
|
}) {
|
|
return (
|
|
<div className={`bg-muted/30 border border-border rounded-xl p-6 ${className}`}>
|
|
{label && (
|
|
<p className="text-[10px] font-mono uppercase tracking-widest text-muted-foreground mb-4">
|
|
{label}
|
|
</p>
|
|
)}
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function DesignSystemPage() {
|
|
const [demoMessages] = React.useState([
|
|
{
|
|
content: 'Hey! Check out this new beat I just finished.',
|
|
sender: { name: 'Alex Chen', initials: 'AC' },
|
|
timestamp: '10:32 AM',
|
|
isOwn: false,
|
|
},
|
|
{
|
|
content: 'This is fire! The 808s hit different.',
|
|
sender: { name: 'You', initials: 'ME' },
|
|
timestamp: '10:33 AM',
|
|
isOwn: true,
|
|
status: 'read' as const,
|
|
},
|
|
{
|
|
content: 'Thanks! I spent 3 hours on the mix. Want the stems?',
|
|
sender: { name: 'Alex Chen', initials: 'AC' },
|
|
timestamp: '10:34 AM',
|
|
isOwn: false,
|
|
reactions: [{ emoji: '🔥', count: 2 }],
|
|
},
|
|
])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Background gradients */}
|
|
<div className="fixed inset-0 pointer-events-none">
|
|
<div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-secondary/5 rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
|
|
<div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-9 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center relative">
|
|
<div className="size-6 rounded-full bg-background flex items-center justify-center">
|
|
<span className="text-xs font-bold text-gradient-cyber">V</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span className="font-bold tracking-wide">
|
|
<span className="text-primary">VEZA</span>
|
|
<span className="text-muted-foreground mx-1">/</span>
|
|
<span className="text-secondary">TALAS</span>
|
|
</span>
|
|
<p className="text-[10px] font-mono text-muted-foreground uppercase tracking-widest">
|
|
Design System v2.0
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="hidden md:flex items-center gap-6">
|
|
{['Foundation', 'Components', 'Patterns'].map((item) => (
|
|
<a
|
|
key={item}
|
|
href={`#${item.toLowerCase()}`}
|
|
className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{item}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<ThemeToggle />
|
|
<Button size="sm">Get Started</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Hero */}
|
|
<div className="relative py-20 border-b border-border">
|
|
<div className="max-w-7xl mx-auto px-6 text-center">
|
|
<Badge variant="premium" className="mb-4">Neon Ronin Aesthetic</Badge>
|
|
<h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-4">
|
|
<span className="text-gradient-cyber">Design System</span>
|
|
</h1>
|
|
<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
|
|
A professional, modern, and elegant design system built for the VEZA music platform.
|
|
Production-ready components for your legacy frontend refactor.
|
|
</p>
|
|
<div className="flex items-center justify-center gap-4">
|
|
<Button size="lg">
|
|
View Components
|
|
</Button>
|
|
<Button size="lg" variant="outline">
|
|
Documentation
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<main className="max-w-7xl mx-auto px-6 relative">
|
|
{/* Color Palette */}
|
|
<Section title="Color Palette" description="The VEZA color system featuring neon accents and void neutrals.">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
|
|
{[
|
|
{ name: 'Primary (Cyan)', var: 'bg-primary', text: 'text-primary-foreground' },
|
|
{ name: 'Secondary (Magenta)', var: 'bg-secondary', text: 'text-secondary-foreground' },
|
|
{ name: 'Success (Lime)', var: 'bg-success', text: 'text-success-foreground' },
|
|
{ name: 'Warning', var: 'bg-warning', text: 'text-warning-foreground' },
|
|
{ name: 'Destructive', var: 'bg-destructive', text: 'text-destructive-foreground' },
|
|
{ name: 'Info', var: 'bg-info', text: 'text-info-foreground' },
|
|
].map((color) => (
|
|
<div key={color.name} className="text-center">
|
|
<div className={`h-20 rounded-lg ${color.var} mb-2 flex items-center justify-center ${color.text} text-xs font-mono`}>
|
|
Aa
|
|
</div>
|
|
<p className="text-xs font-medium">{color.name}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<PreviewBox label="Void Neutrals">
|
|
<div className="flex gap-1">
|
|
{['bg-background', 'bg-card', 'bg-muted', 'bg-accent', 'bg-border'].map((bg, i) => (
|
|
<div key={i} className={`flex-1 h-12 rounded ${bg} ${i === 4 ? '' : ''}`} />
|
|
))}
|
|
</div>
|
|
</PreviewBox>
|
|
</Section>
|
|
|
|
{/* Typography */}
|
|
<Section title="Typography" description="Space Grotesk for headings, JetBrains Mono for code and data.">
|
|
<PreviewBox>
|
|
<div className="space-y-4">
|
|
<h1 className="text-4xl font-bold">Heading 1 - Space Grotesk Bold</h1>
|
|
<h2 className="text-3xl font-semibold">Heading 2 - Space Grotesk Semibold</h2>
|
|
<h3 className="text-2xl font-medium">Heading 3 - Space Grotesk Medium</h3>
|
|
<p className="text-base">Body text - Clean and readable for long-form content.</p>
|
|
<p className="font-mono text-sm text-muted-foreground">
|
|
<code>font-mono</code> - JetBrains Mono for code and technical data
|
|
</p>
|
|
<p className="text-gradient-cyber text-2xl font-bold">Gradient Text Effect</p>
|
|
</div>
|
|
</PreviewBox>
|
|
</Section>
|
|
|
|
{/* Buttons */}
|
|
<Section title="Buttons" description="Multiple variants including neon glow effects and gaming styles.">
|
|
<div className="space-y-6">
|
|
<PreviewBox label="Primary Variants">
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button>Primary</Button>
|
|
<Button variant="secondary">Secondary</Button>
|
|
<Button variant="success">Success</Button>
|
|
<Button variant="destructive">Destructive</Button>
|
|
<Button variant="outline">Outline</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
<Button variant="link">Link</Button>
|
|
</div>
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="Special Variants">
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button variant="gaming">XP Boost</Button>
|
|
<Button variant="nature">Organic</Button>
|
|
<Button variant="hacker">./execute</Button>
|
|
</div>
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="Sizes">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Button size="sm">Small</Button>
|
|
<Button size="default">Default</Button>
|
|
<Button size="lg">Large</Button>
|
|
<Button size="xl">Extra Large</Button>
|
|
</div>
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="Shapes">
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button shape="default">Default</Button>
|
|
<Button shape="pill">Pill Shape</Button>
|
|
<Button shape="manga">Manga Cut</Button>
|
|
</div>
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="States">
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button loading>Loading</Button>
|
|
<Button disabled>Disabled</Button>
|
|
<Button size="icon">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
</PreviewBox>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Badges */}
|
|
<Section title="Badges" description="Status indicators and labels with semantic colors.">
|
|
<PreviewBox>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Badge>Default</Badge>
|
|
<Badge variant="secondary">Secondary</Badge>
|
|
<Badge variant="success">Success</Badge>
|
|
<Badge variant="warning">Warning</Badge>
|
|
<Badge variant="destructive">Destructive</Badge>
|
|
<Badge variant="info">Info</Badge>
|
|
<Badge variant="outline">Outline</Badge>
|
|
<Badge variant="muted">Muted</Badge>
|
|
<Badge variant="gaming">XP +500</Badge>
|
|
<Badge variant="nature">Organic</Badge>
|
|
<Badge variant="live" dot pulse>LIVE</Badge>
|
|
<Badge variant="premium">Premium</Badge>
|
|
</div>
|
|
</PreviewBox>
|
|
</Section>
|
|
|
|
{/* Inputs */}
|
|
<Section title="Inputs" description="Form inputs with multiple variants and icon support.">
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<PreviewBox label="Variants">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label className="mb-2 block">Default</Label>
|
|
<Input placeholder="Enter your email..." />
|
|
</div>
|
|
<div>
|
|
<Label className="mb-2 block">Filled</Label>
|
|
<Input variant="filled" placeholder="Filled variant..." />
|
|
</div>
|
|
<div>
|
|
<Label className="mb-2 block">Ghost</Label>
|
|
<Input variant="ghost" placeholder="Ghost variant..." />
|
|
</div>
|
|
<div>
|
|
<Label className="mb-2 block">Terminal</Label>
|
|
<Input variant="terminal" placeholder="> sudo make music" />
|
|
</div>
|
|
</div>
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="States & Sizes">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label className="mb-2 block">With Icon</Label>
|
|
<Input
|
|
placeholder="Search tracks..."
|
|
startIcon={
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.35-4.35" />
|
|
</svg>
|
|
}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="mb-2 block">Error State</Label>
|
|
<Input variant="error" placeholder="Invalid input..." />
|
|
</div>
|
|
<div>
|
|
<Label className="mb-2 block">Success State</Label>
|
|
<Input variant="success" placeholder="Validated!" />
|
|
</div>
|
|
<div>
|
|
<Label className="mb-2 block">Small Size</Label>
|
|
<Input inputSize="sm" placeholder="Small input..." />
|
|
</div>
|
|
</div>
|
|
</PreviewBox>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Cards */}
|
|
<Section title="Cards" description="Flexible card components with glow effects and variants.">
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
<Card variant="default">
|
|
<CardHeader>
|
|
<CardTitle>Default Card</CardTitle>
|
|
<CardDescription>Standard card with subtle shadow</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground">
|
|
Basic card component for general content display.
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button size="sm" variant="outline">Learn More</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card variant="glow">
|
|
<CardHeader>
|
|
<CardTitle>Glow Card</CardTitle>
|
|
<CardDescription>Hover for cyan neon glow</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground">
|
|
Interactive card with primary color glow on hover.
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button size="sm">Action</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card variant="glowMagenta">
|
|
<CardHeader>
|
|
<CardTitle>Magenta Glow</CardTitle>
|
|
<CardDescription>Hover for magenta neon glow</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground">
|
|
Secondary color glow effect for featured content.
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button size="sm" variant="secondary">Featured</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Avatars */}
|
|
<Section title="Avatars" description="User avatars with status indicators, rings, and grouping.">
|
|
<div className="space-y-6">
|
|
<PreviewBox label="Sizes">
|
|
<div className="flex items-end gap-4">
|
|
<Avatar size="xs"><AvatarFallback>XS</AvatarFallback></Avatar>
|
|
<Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
|
|
<Avatar size="default"><AvatarFallback>MD</AvatarFallback></Avatar>
|
|
<Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
|
|
<Avatar size="xl"><AvatarFallback>XL</AvatarFallback></Avatar>
|
|
<Avatar size="2xl"><AvatarFallback>2X</AvatarFallback></Avatar>
|
|
</div>
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="Status Indicators">
|
|
<div className="flex items-center gap-4">
|
|
<Avatar status="online"><AvatarFallback>ON</AvatarFallback></Avatar>
|
|
<Avatar status="away"><AvatarFallback>AW</AvatarFallback></Avatar>
|
|
<Avatar status="busy"><AvatarFallback>BS</AvatarFallback></Avatar>
|
|
<Avatar status="offline"><AvatarFallback>OF</AvatarFallback></Avatar>
|
|
</div>
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="Ring Styles">
|
|
<div className="flex items-center gap-4">
|
|
<Avatar ring="default"><AvatarFallback>DF</AvatarFallback></Avatar>
|
|
<Avatar ring="primary"><AvatarFallback>PR</AvatarFallback></Avatar>
|
|
<Avatar ring="gradient"><AvatarFallback>GR</AvatarFallback></Avatar>
|
|
<Avatar ring="story"><AvatarFallback>ST</AvatarFallback></Avatar>
|
|
<Avatar ring="live"><AvatarFallback>LV</AvatarFallback></Avatar>
|
|
</div>
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="Avatar Group">
|
|
<AvatarGroup max={4}>
|
|
<Avatar><AvatarFallback>A</AvatarFallback></Avatar>
|
|
<Avatar><AvatarFallback>B</AvatarFallback></Avatar>
|
|
<Avatar><AvatarFallback>C</AvatarFallback></Avatar>
|
|
<Avatar><AvatarFallback>D</AvatarFallback></Avatar>
|
|
<Avatar><AvatarFallback>E</AvatarFallback></Avatar>
|
|
<Avatar><AvatarFallback>F</AvatarFallback></Avatar>
|
|
</AvatarGroup>
|
|
</PreviewBox>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Progress */}
|
|
<Section title="Progress Indicators" description="Linear and circular progress with animations.">
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<PreviewBox label="Linear Progress">
|
|
<div className="space-y-6">
|
|
<Progress value={33} label="Default" showValue />
|
|
<Progress value={66} variant="gradient" label="Gradient" showValue animated />
|
|
<Progress value={100} variant="success" label="Success" showValue />
|
|
<Progress value={25} variant="warning" label="Warning" showValue />
|
|
<Progress value={50} variant="danger" label="Danger" showValue />
|
|
</div>
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="Circular Progress & Loaders">
|
|
<div className="flex items-center gap-8">
|
|
<div className="text-center">
|
|
<CircularProgress value={75} showValue />
|
|
<p className="text-xs text-muted-foreground mt-2">Default</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<CircularProgress value={60} variant="gradient" showValue />
|
|
<p className="text-xs text-muted-foreground mt-2">Gradient</p>
|
|
</div>
|
|
<div className="text-center space-y-3">
|
|
<Equalizer playing className="mx-auto" />
|
|
<p className="text-xs text-muted-foreground">Equalizer</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6">
|
|
<p className="text-xs text-muted-foreground mb-2">Indeterminate Loader</p>
|
|
<LoaderBar />
|
|
</div>
|
|
</PreviewBox>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Audio Player */}
|
|
<Section title="Audio Player" description="Full-featured audio player with waveform visualization.">
|
|
<div className="space-y-6">
|
|
<AudioPlayer
|
|
title="Midnight Pulse"
|
|
artist="Neon Collective"
|
|
variant="default"
|
|
/>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<AudioPlayer
|
|
title="Digital Dreams"
|
|
artist="Cyber Ronin"
|
|
variant="compact"
|
|
/>
|
|
<AudioPlayer
|
|
title="Lo-Fi Vibes"
|
|
artist="Chill Beats"
|
|
variant="mini"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Chat */}
|
|
<Section title="Chat Components" description="Real-time messaging UI with presence indicators.">
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<Chat
|
|
title="Studio Chat"
|
|
subtitle="3 members online"
|
|
messages={demoMessages}
|
|
showTyping
|
|
/>
|
|
|
|
<PreviewBox label="Presence & Status">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<Presence status="online" label />
|
|
<span className="text-sm">Available</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Presence status="away" label />
|
|
<span className="text-sm">Be right back</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Presence status="busy" label />
|
|
<span className="text-sm">In a session</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Presence status="offline" label />
|
|
<span className="text-sm">Last seen 2h ago</span>
|
|
</div>
|
|
</div>
|
|
</PreviewBox>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Stats & Gaming */}
|
|
<Section title="Stats & Gamification" description="Dashboard stats, XP bars, and leaderboards.">
|
|
<div className="space-y-6">
|
|
<StatsGrid columns={4}>
|
|
<StatCard
|
|
label="Total Plays"
|
|
value="124,892"
|
|
change={12.5}
|
|
trend="up"
|
|
changeLabel="vs last month"
|
|
sparkline={[30, 45, 35, 50, 49, 60, 70, 91, 81, 95]}
|
|
icon={
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
}
|
|
/>
|
|
<StatCard
|
|
label="Followers"
|
|
value="8,421"
|
|
change={8.2}
|
|
trend="up"
|
|
changeLabel="this week"
|
|
variant="glow"
|
|
/>
|
|
<StatCard
|
|
label="Revenue"
|
|
value="$12,450"
|
|
change={-3.1}
|
|
trend="down"
|
|
changeLabel="vs last month"
|
|
sparkline={[80, 75, 70, 65, 60, 55, 50, 52, 48, 45]}
|
|
/>
|
|
<StatCard
|
|
label="Tracks"
|
|
value="48"
|
|
change={4}
|
|
trend="up"
|
|
changeLabel="new this month"
|
|
/>
|
|
</StatsGrid>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<PreviewBox label="XP Progress">
|
|
<XPBar level={42} currentXP={7850} maxXP={10000} />
|
|
</PreviewBox>
|
|
|
|
<PreviewBox label="Leaderboard">
|
|
<div className="space-y-2">
|
|
<LeaderboardEntry rank={1} name="CyberBeat" initials="CB" score="124,500" />
|
|
<LeaderboardEntry rank={2} name="NeonPulse" initials="NP" score="98,200" highlight />
|
|
<LeaderboardEntry rank={3} name="VoidWalker" initials="VW" score="87,100" />
|
|
<LeaderboardEntry rank={4} name="SynthMaster" initials="SM" score="65,400" />
|
|
</div>
|
|
</PreviewBox>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Form Controls */}
|
|
<Section title="Form Controls" description="Switches, sliders, and other interactive elements.">
|
|
<PreviewBox>
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<Label>Enable notifications</Label>
|
|
<Switch />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<Label>Dark mode</Label>
|
|
<Switch defaultChecked />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<Label>Auto-play next</Label>
|
|
<Switch />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<Label className="mb-3 block">Volume</Label>
|
|
<Slider defaultValue={[75]} max={100} step={1} />
|
|
</div>
|
|
<div>
|
|
<Label className="mb-3 block">Crossfade (seconds)</Label>
|
|
<Slider defaultValue={[3]} max={12} step={1} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PreviewBox>
|
|
</Section>
|
|
|
|
{/* Tabs */}
|
|
<Section title="Tabs" description="Tab navigation for organizing content.">
|
|
<PreviewBox>
|
|
<Tabs defaultValue="tracks">
|
|
<TabsList>
|
|
<TabsTrigger value="tracks">Tracks</TabsTrigger>
|
|
<TabsTrigger value="albums">Albums</TabsTrigger>
|
|
<TabsTrigger value="playlists">Playlists</TabsTrigger>
|
|
<TabsTrigger value="artists">Artists</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tracks" className="mt-4">
|
|
<p className="text-muted-foreground">
|
|
Your uploaded tracks will appear here. Start creating to see your music library grow.
|
|
</p>
|
|
</TabsContent>
|
|
<TabsContent value="albums" className="mt-4">
|
|
<p className="text-muted-foreground">
|
|
Organize your tracks into albums for better discoverability.
|
|
</p>
|
|
</TabsContent>
|
|
<TabsContent value="playlists" className="mt-4">
|
|
<p className="text-muted-foreground">
|
|
Create and manage playlists to curate your favorite sounds.
|
|
</p>
|
|
</TabsContent>
|
|
<TabsContent value="artists" className="mt-4">
|
|
<p className="text-muted-foreground">
|
|
Artists you collaborate with will show up here.
|
|
</p>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</PreviewBox>
|
|
</Section>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-border mt-20">
|
|
<div className="max-w-7xl mx-auto px-6 py-12">
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-bold">
|
|
<span className="text-primary">VEZA</span>
|
|
<span className="text-muted-foreground mx-1">/</span>
|
|
<span className="text-secondary">TALAS</span>
|
|
</span>
|
|
<span className="text-muted-foreground">Design System</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Built with precision for the future of music platforms.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|