66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import Image from "next/image"
|
|
|
|
import {
|
|
Item,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemGroup,
|
|
ItemMedia,
|
|
ItemTitle,
|
|
} from "@/styles/radix-nova/ui/item"
|
|
|
|
const music = [
|
|
{
|
|
title: "Midnight City Lights",
|
|
artist: "Neon Dreams",
|
|
album: "Electric Nights",
|
|
duration: "3:45",
|
|
},
|
|
{
|
|
title: "Coffee Shop Conversations",
|
|
artist: "The Morning Brew",
|
|
album: "Urban Stories",
|
|
duration: "4:05",
|
|
},
|
|
{
|
|
title: "Digital Rain",
|
|
artist: "Cyber Symphony",
|
|
album: "Binary Beats",
|
|
duration: "3:30",
|
|
},
|
|
]
|
|
|
|
export function ItemImage() {
|
|
return (
|
|
<div className="flex w-full max-w-md flex-col gap-6">
|
|
<ItemGroup className="gap-4">
|
|
{music.map((song) => (
|
|
<Item key={song.title} variant="outline" asChild role="listitem">
|
|
<a href="#">
|
|
<ItemMedia variant="image">
|
|
<Image
|
|
src={`https://avatar.vercel.sh/${song.title}`}
|
|
alt={song.title}
|
|
width={32}
|
|
height={32}
|
|
className="object-cover grayscale"
|
|
/>
|
|
</ItemMedia>
|
|
<ItemContent>
|
|
<ItemTitle className="line-clamp-1">
|
|
{song.title} -{" "}
|
|
<span className="text-muted-foreground">{song.album}</span>
|
|
</ItemTitle>
|
|
<ItemDescription>{song.artist}</ItemDescription>
|
|
</ItemContent>
|
|
<ItemContent className="flex-none text-center">
|
|
<ItemDescription>{song.duration}</ItemDescription>
|
|
</ItemContent>
|
|
</a>
|
|
</Item>
|
|
))}
|
|
</ItemGroup>
|
|
</div>
|
|
)
|
|
}
|