42 lines
2 KiB
TypeScript
42 lines
2 KiB
TypeScript
|
import { ListMusic, Play, Shuffle, Repeat } from 'lucide-react';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
|
||
|
|
export function QueuePage() {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen p-6 space-y-6">
|
||
|
|
<div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="w-12 h-12 rounded-xl bg-kodo-magenta/20 flex items-center justify-center border border-kodo-magenta/30">
|
||
|
|
<ListMusic className="w-6 h-6 text-kodo-magenta" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-display font-bold text-white">Play Queue</h1>
|
||
|
|
<p className="text-sm text-kodo-secondary">Manage your playback queue</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Button variant="outline" size="icon" className="border-white/10">
|
||
|
|
<Shuffle className="w-4 h-4" />
|
||
|
|
</Button>
|
||
|
|
<Button variant="outline" size="icon" className="border-white/10">
|
||
|
|
<Repeat className="w-4 h-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="glass-hud rounded-xl border-white/10 p-12 text-center">
|
||
|
|
<Play className="w-16 h-16 text-kodo-secondary mx-auto mb-4 opacity-50" />
|
||
|
|
<h3 className="text-lg font-bold text-white mb-2">Queue is Empty</h3>
|
||
|
|
<p className="text-kodo-secondary mb-4">
|
||
|
|
Add tracks to your queue to start playing
|
||
|
|
</p>
|
||
|
|
<Button variant="outline" className="border-kodo-magenta/30 text-kodo-magenta hover:bg-kodo-magenta/10">
|
||
|
|
Browse Library
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|