refactor(upload): split admin sections into routes

2026-08-02 16:58:13 +07:00
parent d513b47d09
commit e8e52daf95
7 changed files with 266 additions and 231 deletions
@@ -0,0 +1,64 @@
+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="min-w-0 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>
+	);
+}