49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import styles from "./PortfolioGallery.module.css";
|
|
|
|
export default function PortfolioGallery({ images }: { images: string[] }) {
|
|
const [active, setActive] = useState(0);
|
|
const thumbs = images.slice(0, 3);
|
|
|
|
return (
|
|
<div className={styles.gallery}>
|
|
<div className={styles.main}>
|
|
<div className={styles.mainInner}>
|
|
<Image
|
|
src={images[active] ?? images[0]}
|
|
alt=""
|
|
fill
|
|
className={styles.mainImg}
|
|
sizes="(max-width: 900px) 100vw, 830px"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className={styles.thumbs}>
|
|
{thumbs.map((src, index) => (
|
|
<button
|
|
key={`${src}-${index}`}
|
|
type="button"
|
|
className={active === index ? styles.thumbActive : styles.thumb}
|
|
onClick={() => setActive(index)}
|
|
aria-label={`Show image ${index + 1}`}
|
|
>
|
|
<span className={styles.thumbInner}>
|
|
<Image
|
|
src={src}
|
|
alt=""
|
|
fill
|
|
className={styles.thumbImg}
|
|
sizes="144px"
|
|
/>
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|