49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { PortfolioImage } from "@/generated/prisma";
|
|
import { cn } from "@/lib/utils";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default function ImageGallery({ images }: { images: PortfolioImage[] }) {
|
|
console.log(images);
|
|
return (
|
|
<div className="w-full flex flex-col gap-4">
|
|
<div
|
|
className="flex flex-wrap gap-4"
|
|
>
|
|
{images.map((image) => (
|
|
<div key={image.id} style={{ width: 200, height: 200 }}>
|
|
<Link href={`/portfolio/images/${image.id}`}>
|
|
<div
|
|
className={cn(
|
|
"overflow-hidden transition-all duration-100",
|
|
"w-full h-full",
|
|
"hover:border-2 border-transparent"
|
|
)}
|
|
style={{
|
|
'--tw-border-opacity': 1,
|
|
} as React.CSSProperties}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"relative w-full h-full"
|
|
)}
|
|
>
|
|
<Image
|
|
src={`/api/image/thumbnail/${image.fileKey}.webp`}
|
|
alt={image.altText ?? image.name ?? "Image"}
|
|
fill
|
|
className={cn("object-cover"
|
|
)}
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |