48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
|
import Link from "next/link";
|
||
|
|
import { Mic2 } from "lucide-react";
|
||
|
|
import { Card } from "@/components/ui/card";
|
||
|
|
import { EpisodeStatusBadge } from "./episode-status-badge";
|
||
|
|
|
||
|
|
export interface EpisodeCardData {
|
||
|
|
id: string;
|
||
|
|
title: string;
|
||
|
|
status: string;
|
||
|
|
format: string;
|
||
|
|
language: string;
|
||
|
|
createdAt: Date;
|
||
|
|
coverArtKey?: string | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function EpisodeCard({ episode }: { episode: EpisodeCardData }) {
|
||
|
|
return (
|
||
|
|
<Link href={`/episodes/${episode.id}`}>
|
||
|
|
<Card className="group overflow-hidden transition-shadow hover:shadow-md">
|
||
|
|
<div className="relative aspect-square bg-muted">
|
||
|
|
{episode.coverArtKey ? (
|
||
|
|
// eslint-disable-next-line @next/next/no-img-element
|
||
|
|
<img
|
||
|
|
src={`/api/assets/${episode.coverArtKey}`}
|
||
|
|
alt={episode.title}
|
||
|
|
className="h-full w-full object-cover"
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className="flex h-full w-full items-center justify-center text-muted-foreground">
|
||
|
|
<Mic2 className="h-10 w-10" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="absolute left-2 top-2">
|
||
|
|
<EpisodeStatusBadge status={episode.status} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="p-3">
|
||
|
|
<p className="truncate font-medium">{episode.title}</p>
|
||
|
|
<p className="mt-0.5 text-xs text-muted-foreground">
|
||
|
|
{episode.format.replace("_", "-").toLowerCase()} · {episode.language.toUpperCase()} ·{" "}
|
||
|
|
{episode.createdAt.toLocaleDateString()}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
}
|