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

add more rando

Browse Source
This commit is contained in:
Citali
2025-07-13 00:27:50 +02:00
parent 1d4f167cb9
commit 297848a83a
4 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ export async function getJustifiedImages() {
const images = await prisma.portfolioImage.findMany({ const images = await prisma.portfolioImage.findMany({
where: { where: {
variants: { variants: {
some: { type: "thumbnail" }, some: { type: "resized" },
}, },
}, },
include: { include: {
@ -17,7 +17,7 @@ export async function getJustifiedImages() {
return images return images
.map((img) => { .map((img) => {
const variant = img.variants.find((v) => v.type === "thumbnail"); const variant = img.variants.find((v) => v.type === "resized");
if (!variant || !variant.width || !variant.height) return null; if (!variant || !variant.width || !variant.height) return null;
const bg = img.colors.find((c) => c.type === "vibrant")?.color.hex ?? "#e5e7eb"; const bg = img.colors.find((c) => c.type === "vibrant")?.color.hex ?? "#e5e7eb";
@ -29,7 +29,7 @@ export async function getJustifiedImages() {
backgroundColor: bg, backgroundColor: bg,
width: variant.width, width: variant.width,
height: variant.height, height: variant.height,
url: variant.url ?? `/api/image/thumbnail/${img.fileKey}.webp`, url: variant.url ?? `/api/image/resized/${img.fileKey}.webp`,
}; };
}) })
.filter(Boolean) as JustifiedInputImage[]; .filter(Boolean) as JustifiedInputImage[];

2
src/app/portfolio/two/page.tsx
View File

@ -6,7 +6,7 @@ export default async function PortfolioTwoPage() {
return ( return (
<main className="p-2 mx-auto max-w-screen-2xl"> <main className="p-2 mx-auto max-w-screen-2xl">
<JustifiedGallery images={images} rowHeight={350} gap={12} /> <JustifiedGallery images={images} rowHeight={340} gap={12} />
</main> </main>
); );
} }

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

@ -56,7 +56,7 @@ export function ImageCard(props: ImageCardProps) {
return ( return (
<div <div
className={cn( className={cn(
"overflow-hidden rounded-md", "overflow-hidden",
isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform", isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
isMosaic && "w-full h-full" isMosaic && "w-full h-full"
)} )}

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

@ -33,14 +33,14 @@ export function JustifiedGallery({ images, rowHeight = 200, gap = 4 }: Props) {
}, [images, containerWidth, rowHeight, gap]); }, [images, containerWidth, rowHeight, gap]);
return ( return (
<div ref={containerRef} className="w-full"> <div ref={containerRef} className="w-full flex flex-col" style={{ rowGap: `${gap}px` }}>
{rows.length === 0 && ( {rows.length === 0 && (
<p className="text-muted-foreground text-center py-20">No images to display</p> <p className="text-muted-foreground text-center py-20">No images to display</p>
)} )}
{rows.map((row, i) => ( {rows.map((row, i) => (
<div <div
key={i} key={i}
className="flex mb-4" // Vertical gap between rows className="flex" // Vertical gap between rows
style={{ columnGap: `${gap}px` }} // Horizontal gap between images style={{ columnGap: `${gap}px` }} // Horizontal gap between images
> >
{row.map((img) => ( {row.map((img) => (