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

Add lightbox

Browse Source
This commit is contained in:
Citali
2025-07-29 12:32:04 +02:00
parent 4d6ef3c832
commit bc5935701e
6 changed files with 314 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/actions/portfolio/getJustifiedImages.ts
View File

@ -56,6 +56,9 @@ export interface JustifiedInputImage {
width: number;
height: number;
fileKey: string;
fullUrl: string;
fullWidth: number;
fullHeight: number;
}
interface Variant {
@ -199,6 +202,7 @@ export async function getJustifiedImages(
for (const ctx of finalList) {
const img = ctx.image;
const variant = img.variants.find((v) => v.type === "resized");
const full = img.variants.find((v) => v.type === "modified");
if (!variant || !variant.width || !variant.height) continue;
@ -212,6 +216,9 @@ export async function getJustifiedImages(
width: variant.width,
height: variant.height,
url: variant.url ?? `/api/image/resized/${img.fileKey}.webp`,
fullUrl: full?.url ?? `/api/image/modified/${img.fileKey}.webp`,
fullWidth: full?.width ?? 0,
fullHeight: full?.height ?? 0,
});
}

10
src/app/page.tsx
View File

@ -13,13 +13,19 @@ import Link from "next/link";
const sections = [
{
title: "Art Portfolio",
href: "/portfolio",
href: "/portfolio/art",
description: "My artwork gallery",
icon: Palette,
},
{
title: "Artfight",
href: "/portfolio/artfight",
description: "Artfight pieces",
icon: Palette,
},
{
title: "Miniatures",
href: "/miniatures",
href: "/portfolio/minis",
description: "See my painted miniatures",
icon: Brush,
},

57
src/components/portfolio/ImageCard.tsx
View File

@ -3,7 +3,6 @@
import type { Color, ImageColor, ImageVariant, PortfolioImage } from "@/generated/prisma";
import { cn } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";
// ---------- Type Definitions ----------
@ -57,40 +56,40 @@ export function ImageCard(props: ImageCardProps) {
// console.log(props.image);
return (
<Link href={`/portfolio/${props.image.id}`}>
// <Link href={`/portfolio/${props.image.id}`}>
<div
className={cn(
"overflow-hidden transition-all duration-100",
isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
isMosaic && "w-full h-full",
"hover:border-2 border-transparent"
)}
style={{
backgroundColor,
'--tw-border-opacity': 1,
'--hover-border-color': backgroundColor,
} as React.CSSProperties}
>
<div
className={cn(
"overflow-hidden transition-all duration-100",
isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
isMosaic && "w-full h-full",
"hover:border-2 border-transparent"
"relative w-full h-full",
isSquare && "flex items-center justify-center"
)}
style={{
backgroundColor,
'--tw-border-opacity': 1,
'--hover-border-color': backgroundColor,
} as React.CSSProperties}
>
<div
<Image
src={src}
alt={altText}
fill={isMosaic}
width={isSquare ? 400 : undefined}
height={isSquare ? 400 : undefined}
className={cn(
"relative w-full h-full",
isSquare && "flex items-center justify-center"
isSquare && "object-contain max-w-full max-h-full",
isMosaic && "object-cover"
)}
>
<Image
src={src}
alt={altText}
fill={isMosaic}
width={isSquare ? 400 : undefined}
height={isSquare ? 400 : undefined}
className={cn(
isSquare && "object-contain max-w-full max-h-full",
isMosaic && "object-cover"
)}
loading="lazy"
/>
</div>
loading="lazy"
/>
</div>
</Link>
</div>
// </Link>
);
}

74
src/components/portfolio/JustifiedGallery.tsx
View File

@ -6,6 +6,7 @@ import {
} from "@/utils/justifyPortfolioImages";
import { useEffect, useRef, useState } from "react";
import { ImageCard } from "./ImageCard";
import { Lightbox } from "./Lightbox";
interface Props {
images: JustifiedImage[];
@ -17,6 +18,7 @@ export function JustifiedGallery({ images, rowHeight = 200, gap = 4 }: Props) {
const containerRef = useRef<HTMLDivElement>(null);
const [containerWidth, setContainerWidth] = useState(1200);
const [rows, setRows] = useState<JustifiedImage[][]>([]);
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
useEffect(() => {
if (!containerRef.current) return;
@ -32,32 +34,54 @@ export function JustifiedGallery({ images, rowHeight = 200, gap = 4 }: Props) {
setRows(newRows);
}, [images, containerWidth, rowHeight, gap]);
const openModal = (index: number) => setSelectedIndex(index);
return (
<div ref={containerRef} className="w-full flex flex-col" style={{ rowGap: `${gap}px` }}>
{rows.length === 0 && (
<p className="text-muted-foreground text-center py-20">No images to display</p>
<>
<div ref={containerRef} className="w-full flex flex-col" style={{ rowGap: `${gap}px` }}>
{rows.length === 0 && (
<p className="text-muted-foreground text-center py-20">No images to display</p>
)}
{rows.map((row, i) => (
<div
key={i}
className="flex" // Vertical gap between rows
style={{ columnGap: `${gap}px` }} // Horizontal gap between images
>
{row.map((img) => {
const index = images.findIndex((i) => i.id === img.id);
return (
<div
key={img.id}
style={{ width: img.width, height: img.height }}
onClick={() => openModal(index)}
className="cursor-zoom-in"
>
<ImageCard
image={{
id: img.id,
altText: img.altText,
url: img.url,
backgroundColor: img.backgroundColor,
}}
variant="mosaic"
/>
</div>
)
})}
</div>
))}
</div>
{selectedIndex !== null && (
<Lightbox
image={images[selectedIndex]}
onClose={() => setSelectedIndex(null)}
hasPrev={selectedIndex > 0}
hasNext={selectedIndex < images.length - 1}
onPrev={() => setSelectedIndex((i) => (i !== null ? i - 1 : null))}
onNext={() => setSelectedIndex((i) => (i !== null ? i + 1 : null))}
/>
)}
{rows.map((row, i) => (
<div
key={i}
className="flex" // Vertical gap between rows
style={{ columnGap: `${gap}px` }} // Horizontal gap between images
>
{row.map((img) => (
<div key={img.id} style={{ width: img.width, height: img.height }}>
<ImageCard
image={{
id: img.id,
altText: img.altText,
url: img.url,
backgroundColor: img.backgroundColor,
}}
variant="mosaic"
/>
</div>
))}
</div>
))}
</div>
</>
);
}

79
src/components/portfolio/Lightbox.tsx Normal file
View File

@ -0,0 +1,79 @@
"use client";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import Image from "next/image";
import { useEffect } from "react";
import { createPortal } from "react-dom";
interface Props {
image: {
fullUrl: string;
altText?: string;
fullWidth: number;
fullHeight: number;
};
onClose: () => void;
onPrev?: () => void;
onNext?: () => void;
hasPrev?: boolean;
hasNext?: boolean;
}
export function Lightbox({ image, onClose, onPrev, onNext, hasPrev, hasNext }: Props) {
useEffect(() => {
const handleKey = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
if (e.key === "ArrowLeft" && hasPrev) onPrev?.();
if (e.key === "ArrowRight" && hasNext) onNext?.();
};
window.addEventListener("keydown", handleKey);
return () => window.removeEventListener("keydown", handleKey);
}, [hasPrev, hasNext, onClose, onPrev, onNext]);
return createPortal(
<div
className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center"
onClick={onClose}
>
<div
className="relative max-w-[80vw] max-h-[90vh] w-full h-full flex items-center justify-center p-4"
onClick={(e) => e.stopPropagation()}
>
<Image
src={image.fullUrl}
alt={image.altText || ""}
width={image.fullWidth}
height={image.fullHeight}
className="object-contain max-w-full max-h-full rounded-md"
/>
{/* Close */}
<button
onClick={onClose}
className="absolute top-4 right-4 text-white hover:text-gray-300"
>
<X className="w-6 h-6" />
</button>
{/* Prev/Next */}
{hasPrev && (
<button
onClick={onPrev}
className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300"
>
<ChevronLeft className="w-10 h-10" />
</button>
)}
{hasNext && (
<button
onClick={onNext}
className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300"
>
<ChevronRight className="w-10 h-10" />
</button>
)}
</div>
</div>,
document.body
);
}

143
src/components/ui/dialog.tsx Normal file
View File

@ -0,0 +1,143 @@
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
}
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}
function DialogOverlay({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
return (
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props}
/>
)
}
function DialogContent({
className,
children,
showCloseButton = true,
...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
showCloseButton?: boolean
}) {
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay />
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
className
)}
{...props}
>
{children}
{showCloseButton && (
<DialogPrimitive.Close
data-slot="dialog-close"
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
>
<XIcon />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</DialogPortal>
)
}
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
)
}
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
)}
{...props}
/>
)
}
function DialogTitle({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn("text-lg leading-none font-semibold", className)}
{...props}
/>
)
}
function DialogDescription({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
export {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
}