54 lines
3.1 KiB
TypeScript
54 lines
3.1 KiB
TypeScript
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import AdminPageHeader from "@/components/admin/admin-page-header";
|
|
import { deleteMelody } from "@/app/admin/(protected)/melodies/actions";
|
|
import { prisma } from "@/lib/db";
|
|
|
|
type MelodiesPageProps = { searchParams: { error?: string } };
|
|
|
|
function getErrorMessage(error?: string) {
|
|
if (error === "invalid-id") return "The selected melody id is invalid.";
|
|
if (error === "not-found") return "The selected melody no longer exists.";
|
|
if (error === "delete-failed") return "The melody could not be deleted.";
|
|
return null;
|
|
}
|
|
|
|
export default async function MelodiesPage({ searchParams }: MelodiesPageProps) {
|
|
const melodies = await prisma.melody.findMany({
|
|
orderBy: [{ isFeatured: "desc" }, { sortOrder: "asc" }, { updatedAt: "desc" }],
|
|
include: { category: { select: { nameEn: true, nameAr: true } } },
|
|
});
|
|
const errorMessage = getErrorMessage(searchParams.error);
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-7xl">
|
|
<AdminPageHeader title="Melodies" description="Manage audio tracks, cover art, categories, publishing, and download permissions." actions={<Button asChild><Link href="/admin/melodies/new">New melody</Link></Button>} />
|
|
{errorMessage ? <p className="mb-6 rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">{errorMessage}</p> : null}
|
|
{melodies.length === 0 ? (
|
|
<Card><CardContent className="p-6"><p className="text-sm text-muted-foreground">No melodies yet.</p></CardContent></Card>
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{melodies.map((melody) => (
|
|
<Card key={melody.id}>
|
|
<CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
|
|
<div><CardTitle className="text-lg">{melody.titleEn}</CardTitle><p className="mt-1 text-sm text-muted-foreground" dir="rtl">{melody.titleAr}</p></div>
|
|
<span className="rounded-pill border border-border px-2 py-1 text-xs text-muted-foreground">{melody.status}</span>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-xs text-muted-foreground">/{melody.slug}</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">{melody.category.nameEn} · {melody.category.nameAr}</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">{melody.durationSec ? `${melody.durationSec}s` : "No duration"} · {melody.isDownloadable ? "Download enabled" : "Streaming only"}</p>
|
|
<div className="mt-5 flex items-center gap-2">
|
|
<Button asChild size="sm" variant="outline"><Link href={`/admin/melodies/${melody.id}/edit`}>Edit</Link></Button>
|
|
<form action={deleteMelody}><input type="hidden" name="melodyId" value={melody.id} /><Button type="submit" size="sm" variant="ghost">Delete</Button></form>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|