65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import type { LatestVideo } from "@/lib/video/video-platforms";
|
|
import { ExternalLink, PlaySquare } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export function LatestCard({
|
|
title,
|
|
videos,
|
|
}: {
|
|
title: string;
|
|
videos: LatestVideo[];
|
|
}) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardDescription>Most recent 10 published videos.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-3 sm:grid-cols-2">
|
|
{videos.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
Connect the platform API to load videos.
|
|
</p>
|
|
) : (
|
|
videos.map((video) => (
|
|
<Link
|
|
key={video.id}
|
|
href={video.url}
|
|
target="_blank"
|
|
className="group flex gap-3 rounded-lg border p-2 transition-colors hover:border-primary/60"
|
|
>
|
|
<div className="relative aspect-square w-28 shrink-0 overflow-hidden rounded-md bg-muted">
|
|
{video.thumbnailUrl ? (
|
|
<Image
|
|
src={video.thumbnailUrl}
|
|
alt=""
|
|
fill
|
|
sizes="112px"
|
|
unoptimized
|
|
referrerPolicy="no-referrer"
|
|
className="object-cover"
|
|
/>
|
|
) : (
|
|
<PlaySquare className="absolute inset-0 m-auto text-muted-foreground" />
|
|
)}
|
|
</div>
|
|
<span className="line-clamp-4 min-w-0 break-words text-sm font-medium leading-snug group-hover:underline">
|
|
{video.title}
|
|
</span>
|
|
<ExternalLink className="mt-0.5 shrink-0 text-muted-foreground" />
|
|
</Link>
|
|
))
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|