39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import Image from "next/image";
|
|
import styles from "./BentoGallery.module.css";
|
|
|
|
interface GalleryImage {
|
|
src: string;
|
|
alt: string;
|
|
}
|
|
|
|
interface BentoGalleryProps {
|
|
images: GalleryImage[];
|
|
}
|
|
|
|
export default function BentoGallery({ images }: BentoGalleryProps) {
|
|
const items = images.slice(0, 6);
|
|
|
|
return (
|
|
<section className={styles.gallerySection} aria-label="Bildergalerie">
|
|
<div className={styles.inner}>
|
|
<div className={styles.grid}>
|
|
{items.map((image, index) => (
|
|
<div key={image.src} className={styles.item} data-index={index}>
|
|
<div className={styles.frame}>
|
|
<Image
|
|
src={image.src}
|
|
alt={image.alt}
|
|
fill
|
|
className={styles.image}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 600px"
|
|
priority={index === 0}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|