Change styling
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user