kami
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import { Play } from 'lucide-react';
|
|
import { Artwork } from './Artwork';
|
|
|
|
interface MediaCardProps {
|
|
seed: string;
|
|
title: string;
|
|
subtitle?: string;
|
|
artSrc?: string | null;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function MediaCard({ seed, title, subtitle, artSrc, onClick }: MediaCardProps) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className="card-surface group text-left w-full"
|
|
>
|
|
<div className="artwork-frame relative w-full">
|
|
<Artwork seed={seed} src={artSrc} className="w-full h-full transition-transform duration-500 group-hover:scale-105" rounded="xl" />
|
|
<div className="play-overlay">
|
|
<div className="play-overlay-btn">
|
|
<Play size={18} fill="currentColor" className="ml-0.5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-semibold text-text">{title}</div>
|
|
{subtitle && <div className="truncate text-xs text-muted mt-0.5">{subtitle}</div>}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|