Files
v2.app.gaertan.art/src/app/(normal)/artworks/animalstudies/page.tsx

95 lines
3.0 KiB
TypeScript

import AnimalStudiesGallery from "@/components/animalStudies/AnimalStudiesGallery";
import TagFilterDialog from "@/components/artworks/TagFilterDialog";
import { Button } from "@/components/ui/button";
import { prisma } from "@/lib/prisma";
import { ListIcon } from "lucide-react";
import Link from "next/link";
function parseTagsParam(tags: string | string[] | undefined): string[] {
if (!tags) return [];
const raw = Array.isArray(tags) ? tags.join(",") : tags;
return raw
.split(",")
.map((s) => s.trim())
.filter(Boolean);
}
function expandSelectedWithChildren(
selectedSlugs: string[],
tagsForFilter: Array<{
slug: string;
children: Array<{ slug: string }>;
}>,
) {
const bySlug = new Map(tagsForFilter.map((t) => [t.slug, t]));
const out = new Set(selectedSlugs);
for (const slug of selectedSlugs) {
const t = bySlug.get(slug);
if (!t) continue;
for (const c of t.children ?? []) out.add(c.slug);
}
return Array.from(out);
}
export default async function AnimalStudiesPage({
searchParams,
}: {
searchParams: { tags?: string | string[] };
}) {
const { tags } = await searchParams;
const selectedTagSlugs = parseTagsParam(tags);
const tagsForFilter = await prisma.artTag.findMany({
where: { showOnAnimalPage: true },
select: {
id: true,
name: true,
slug: true,
sortIndex: true,
parentId: true,
parent: { select: { id: true, name: true, slug: true, sortIndex: true } },
children: {
where: { showOnAnimalPage: true },
select: { id: true, name: true, slug: true, sortIndex: true, parentId: true },
orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
},
},
orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
});
const expandedTagSlugs = expandSelectedWithChildren(selectedTagSlugs, tagsForFilter);
return (
<div className="mx-auto w-full max-w-6xl px-4 py-8">
<header className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div className="space-y-1">
<h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
Animal studies
</h1>
<p className="text-sm text-muted-foreground">
{selectedTagSlugs.length > 0
? `Filtered by ${selectedTagSlugs.length} tag${selectedTagSlugs.length === 1 ? "" : "s"
}`
: "Browse all published artworks in this category."}
</p>
</div>
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
<TagFilterDialog tags={tagsForFilter} selectedTagSlugs={selectedTagSlugs} />
<Button asChild type="button" variant="secondary" className="h-11 gap-2">
<Link href="/artworks/animalstudies/index">
<ListIcon className="h-4 w-4" />
Animal index
</Link>
</Button>
</div>
</header>
<AnimalStudiesGallery key={expandedTagSlugs.join(",")} tagSlugs={expandedTagSlugs} />
</div>
);
}