50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { Badge } from "@/registry/bases/radix/ui/badge"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardTitle,
|
|
} from "@/registry/bases/radix/ui/card"
|
|
import { Separator } from "@/registry/bases/radix/ui/separator"
|
|
|
|
export function AlbumCard() {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex flex-col gap-4">
|
|
<div className="relative overflow-hidden rounded-lg">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1534088568595-a066f410bcda?w=800&h=800&fit=crop"
|
|
alt="Synthetic Horizons EP cover art"
|
|
className="aspect-square w-full object-cover"
|
|
/>
|
|
<Badge className="absolute top-3 right-3">$26,033.79</Badge>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<CardTitle>Synthetic Horizons EP</CardTitle>
|
|
<CardDescription className="text-xs tracking-wider uppercase">
|
|
Released Aug 14, 2023
|
|
</CardDescription>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex-col gap-4">
|
|
<Separator />
|
|
<div className="grid w-full grid-cols-2 gap-4">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-xs tracking-wider text-muted-foreground uppercase">
|
|
Tracks
|
|
</span>
|
|
<span className="text-lg font-medium tabular-nums">6 Tracks</span>
|
|
</div>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="line-clamp-1 text-xs tracking-wider text-muted-foreground uppercase">
|
|
Cumulative Streams
|
|
</span>
|
|
<span className="text-lg font-medium tabular-nums">6,198,524</span>
|
|
</div>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|