37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { Link } from "react-router";
|
|
import { Star } from "lucide-react";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { Card, CardContent } from "~/components/ui/card";
|
|
import type { SongSummary } from "~/lib/types";
|
|
|
|
interface Props {
|
|
song: SongSummary;
|
|
isFavorite?: boolean;
|
|
}
|
|
|
|
export function SongCard({ song, isFavorite }: Props) {
|
|
return (
|
|
<Link to={`/songs/${song.id}`}>
|
|
<Card className="h-full hover:bg-accent transition-colors cursor-pointer relative">
|
|
{isFavorite && (
|
|
<Star className="absolute top-2 right-2 w-3.5 h-3.5 fill-primary text-primary" />
|
|
)}
|
|
<CardContent className="p-3 flex flex-col gap-1">
|
|
<div className="flex flex-wrap gap-1">
|
|
{song.preview_chords.map((chord) => (
|
|
<Badge key={chord} variant="secondary" className="text-xs font-mono">
|
|
{chord}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<p className="font-semibold text-sm leading-tight mt-1">{song.meta.title}</p>
|
|
<p className="text-xs text-muted-foreground">{song.meta.artist}</p>
|
|
{song.meta.original_key && (
|
|
<p className="text-xs text-muted-foreground">Key: {song.meta.original_key}</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|