Citali/v2.app.gaertan.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor galleries and single page

Browse Source
This commit is contained in:
Citali
2025-12-30 19:37:33 +01:00
parent 8143f90bfc
commit 21faef78ee
9 changed files with 301 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/app/(normal)/artworks/single/[id]/page.tsx
View File

@ -1,10 +1,11 @@
import ArtworkMetaCard from "@/components/artworks/ArtworkMetaCard";
import { ContextBackButton } from "@/components/artworks/ContextBackButton";
import { prisma } from "@/lib/prisma";
import { cn } from "@/lib/utils";
import { LayersIcon, QuoteIcon, TagIcon } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
export default async function SingleArtworkPage({ params }: { params: { id: string } }) {
export default async function SingleArtworkPage({ params }: { params: { id: string }; searchParams: Record<string, string | string[] | undefined>; }) {
const { id } = await params;
const artwork = await prisma.artwork.findUnique({
where: {
@ -36,10 +37,15 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
return (
<div className="px-8 py-4">
<div className="relative w-full min-h-10 flex items-center mb-4">
<div className="z-10"><ContextBackButton /></div>
{artwork.name ? (
<div className="pointer-events-none absolute left-1/2 -translate-x-1/2 text-center">
<div className="pointer-events-auto"><h1 className="text-2xl font-bold mb-4 py-4">{artwork.name}</h1></div>
</div>
) : null}
</div>
<div className="flex flex-col items-center gap-4">
<div>
<h1 className="text-2xl font-bold mb-4 pb-4">{artwork.name}</h1>
</div>
<div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background relative">
<div className="relative w-full bg-muted items-center justify-center"
style={{ aspectRatio: "4 / 3" }}
@ -54,109 +60,23 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
className={cn("object-cover transition duration-300")}
/>
</Link>
{/* {image.nsfw && (
<div className="absolute top-1 left-1 z-10 flex gap-1">
<TagBadge
label="NSFW"
variant="destructive"
icon={<EyeOffIcon size={12} />}
className="text-xs px-2 py-0.5 inline-flex items-center"
/>
</div>
)} */}
</div>
{/* {!isLarge && (
<div className="p-4">
<h2 className="text-lg font-semibold truncate text-center">{image.imageName}</h2>
</div>
)} */}
</div>
<div
className="rounded-lg"
style={{
background: `linear-gradient(135deg, ${gradientColors})`,
}}>
<div
className="overflow-hidden border rounded-lg m-0.5 p-4 shadow w-full max-w-xl space-y-3 bg-white dark:bg-black"
>
{artwork.altText && (
<div className="flex items-center gap-2">
<TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-px" />
<span className="text-sm text-muted-foreground">{artwork.altText}</span>
</div>
)}
{artwork.description && (
<div className="flex items-center gap-2">
<QuoteIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-px" />
<span className="text-sm text-muted-foreground">{artwork.description}</span>
</div>
)}
{/* {creationLabel && (
<div className="flex items-center gap-2">
<CalendarDaysIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
<span className="text-sm text-muted-foreground">{creationLabel}</span>
</div>
)}
{album && (
<div className="flex items-center gap-2 flex-wrap">
<ImagesIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
<Link href={`/galleries/${album.gallery?.slug}/${album.slug}`} className="text-sm underline">
{album.name}
</Link>
</div>
)} */}
{artwork.categories.length > 0 && (
<div className="flex items-center gap-2 flex-wrap">
<LayersIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-1px" />
{artwork.categories.map((cat) => (
<Link
key={cat.id}
href={`/categories/${cat.id}`}
className="text-sm underline"
>
{cat.name}
</Link>
))}
</div>
)}
{artwork.tags.length > 0 && (
<div className="flex items-center gap-2 flex-wrap">
<TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-1px" />
{artwork.tags.map((tag) => (
<Link
key={tag.id}
href={`/tags/${tag.id}`}
className="text-sm underline"
>
{tag.name}
</Link>
))}
</div>
)}
</div>
</div>
{/* <ImageCard image={image} gallerySlug={image.album?.gallery?.slug} albumSlug={image.album?.slug} size="large" />
<section className="py-8 flex flex-col gap-4">
{image.artist && <ArtistInfoBox artist={image.artist} />}
<ImageMetadataBox
album={image.album}
categories={image.categories}
tags={image.tags}
creationDate={image.creationDate}
creationYear={image.creationYear}
creationMonth={image.creationMonth}
altText={image.altText}
description={image.description}
}}
>
<ArtworkMetaCard
gradientColors={gradientColors}
altText={artwork.altText}
description={artwork.description}
categories={artwork.categories}
tags={artwork.tags}
/>
</section> */}
</div>
</div>
</div >
);
}