Change styling

This commit is contained in:
2026-01-29 12:58:30 +01:00
parent d84467f29b
commit afa7e3986e
3 changed files with 115 additions and 21 deletions

View File

@ -1,4 +1,4 @@
import { prisma } from "@/lib/prisma";
import { ArrowLeftIcon } from "lucide-react";
import Link from "next/link";
import {
@ -11,7 +11,7 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { ArrowLeftIcon } from "lucide-react";
import { prisma } from "@/lib/prisma";
type SimpleArtwork = {
id: string;
@ -178,7 +178,16 @@ export default async function AnimalListPage() {
return (
<AccordionItem key={p.id} value={p.id} className="border-b">
<AccordionTrigger className="py-4">
<AccordionTrigger
className="
py-4
rounded-md px-2 -mx-2
transition-colors
hover:bg-muted/60
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
data-[state=open]:bg-muted/40
"
>
<div className="flex w-full items-center justify-between pr-2">
<div className="flex min-w-0 items-center gap-2">
<span className="truncate font-medium">{p.name}</span>
@ -203,7 +212,6 @@ export default async function AnimalListPage() {
</AccordionTrigger>
<AccordionContent className="pb-5">
{/* If standalone root: just list its artworks */}
{isStandalone ? (
<div className="rounded-md border p-4">
<div className="mb-3 flex items-center justify-between">
@ -214,29 +222,26 @@ export default async function AnimalListPage() {
</div>
) : (
<div className="space-y-4">
{/* Optional: artworks directly on the parent */}
<div className="rounded-md border p-4">
<div className="mb-3 flex items-center justify-between">
<div className="text-sm font-medium">
{/* Directly tagged */}
{p.artworks.length > 0 ? (
<>
<div className="rounded-md border p-4">
<div className="mb-3 flex items-center justify-between">
<div className="text-sm font-medium">{/* Directly tagged */}</div>
<Badge variant="outline">{p.artworks.length}</Badge>
</div>
<ArtworkList items={p.artworks} />
</div>
<Badge variant="outline">{p.artworks.length}</Badge>
</div>
<ArtworkList items={p.artworks} />
</div>
<Separator />
<Separator />
</>
) : null}
{/* Children blocks */}
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
{children.map((c) => (
<div key={c.id} className="rounded-md border p-4">
<div className="mb-3 flex items-center justify-between">
<div className="min-w-0">
<div className="truncate text-sm font-medium">{c.name}</div>
{/* <div className="text-xs text-muted-foreground">
Sub-tag of {p.name}
</div> */}
</div>
<Badge variant="outline">{c.artworks.length}</Badge>
</div>