Ubuntu
93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import { Button, Card } from "@/components/retroui";
|
|
import { Slider } from "@/components/retroui/Slider";
|
|
import {
|
|
ArrowLeft,
|
|
Heart,
|
|
Pause,
|
|
Repeat,
|
|
Shuffle,
|
|
Sparkle,
|
|
StepBack,
|
|
StepForward,
|
|
} from "lucide-react";
|
|
|
|
|
|
export default function RetroPlayerStyle() {
|
|
return (
|
|
<Card className="w-full max-w-sm rounded-lg shadow-none">
|
|
{/* header */}
|
|
<Card.Header className="flex flex-row justify-between border-b border-black/50 dark:border-white/50">
|
|
<Button variant="ghost" className="p-0">
|
|
<ArrowLeft className="size-5" />
|
|
</Button>
|
|
<p className="text-sm font-bold">Now playing</p>
|
|
<Button variant="ghost" className="p-0">
|
|
<Heart className="size-5" />
|
|
</Button>
|
|
</Card.Header>
|
|
{/* card content */}
|
|
<Card.Content className="relative px-4 sm:px-12 py-6 overflow-hidden">
|
|
{/* thumbnail box */}
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<img
|
|
src="/images/punk.svg"
|
|
alt="retro player album"
|
|
className="size-12 object-contain rounded-md border"
|
|
/>
|
|
<div className="flex-1">
|
|
<p className="font-semibold">Punk Anthem Music</p>
|
|
<p className="text-sm">by Punk</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="">
|
|
{/* timeline box */}
|
|
<div>
|
|
<Slider value={[50]} />
|
|
<div className="flex items-center justify-between mt-1.5 select-none">
|
|
<p className="text-xs text-muted-foreground">
|
|
01:10
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
02:15
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* controls */}
|
|
<div className="flex gap-2 sm:gap-3 items-center justify-between mt-3">
|
|
<Button variant="ghost" className="p-0">
|
|
<Repeat className="size-4" />
|
|
</Button>
|
|
<Button variant="ghost" className="p-0">
|
|
<StepBack className="size-5" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="rounded-full h-14 w-14"
|
|
>
|
|
<Pause className="size-5" />
|
|
</Button>
|
|
<Button variant="ghost" className="p-0">
|
|
<StepForward className="size-5" />
|
|
</Button>
|
|
<Button variant="ghost" className="p-0">
|
|
<Shuffle className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Sparkle
|
|
size={30}
|
|
strokeWidth={0.5}
|
|
className="absolute sm:block hidden -right-2 top-26 fill-amber-300 rotate-12"
|
|
/>
|
|
<Sparkle
|
|
size={20}
|
|
strokeWidth={0.5}
|
|
className="absolute sm:block hidden left-1 bottom-20 fill-slate-500"
|
|
/>
|
|
</Card.Content>
|
|
</Card>
|
|
);
|
|
}
|