98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
'use client'
|
||
import Image from 'next/image'
|
||
import { useEffect, useState } from 'react'
|
||
|
||
const images = [
|
||
'/images/people/abdulrahman_elawady/abdulrahman_elawady.jpg',
|
||
'/images/people/adnan_fatayerji/adnan_fatayerji.jpg',
|
||
'/images/people/ahmed_hanafy/ahmed_hanafy.jpg',
|
||
'/images/people/ahmed_harby/ahmed_harby.jpg',
|
||
'/images/people/ahmed_thabet/ahmed_thabet.jpg',
|
||
'/images/people/alaa_mahmoud/alaa_mahmoud.jpg',
|
||
'/images/people/alexandre_hannelas/alexandre_hannelas.jpeg',
|
||
'/images/people/ashraf_fouda/ashraf_fouda.jpg',
|
||
'/images/people/atef_nazmy/atef_nazmy.jpg',
|
||
'/images/people/ehab_hassan/ehab_hassan.jpg',
|
||
'/images/people/eslam_nawara/eslam_nawara.jpg',
|
||
'/images/people/evon_yacoub/evon_yacoub.jpg',
|
||
'/images/people/gregory_flipo/gregory_flipo.jpg',
|
||
'/images/people/jan_de_landtsheer/jan_de_landtsheer.jpeg',
|
||
'/images/people/karoline_zizka/karoline_zizka.jpeg',
|
||
'/images/people/khaled_youssef/khaled.jpg',
|
||
'/images/people/kristof_de_spiegeleer/kristof_de_spiegeleer.jpeg',
|
||
'/images/people/mahendra_varma/mahendra_varma.jpg',
|
||
'/images/people/mahmoud_emad/mahmoud_emad.jpg',
|
||
'/images/people/marion_ravarino/marion_ravarino.jpeg',
|
||
'/images/people/mik_perreault/mik_perreault.jpg',
|
||
'/images/people/peter_nashaat/peter_nashaat.jpg',
|
||
'/images/people/sacha_obeegadoo/sacha_obeegadoo.jpg',
|
||
'/images/people/sabrina_sadik/sabrina_sadik.jpg',
|
||
'/images/people/sam_taggart/sam_taggart.jpg',
|
||
'/images/people/samar_adel/samar_adel.jpg',
|
||
'/images/people/sameh_abouelsaad/sameh_abouelsaad.jpg',
|
||
'/images/people/samir_hosny/samir_hosny.jpg',
|
||
'/images/people/scott_yeager/scott_yeager.jpg',
|
||
'/images/people/timur_gordon/timur_gordon.jpg',
|
||
]
|
||
|
||
export function Gallery() {
|
||
const [shuffledImages, setShuffledImages] = useState(images)
|
||
const [activeIndex, setActiveIndex] = useState<number | null>(null)
|
||
|
||
useEffect(() => {
|
||
setShuffledImages([...images].sort(() => Math.random() - 0.5))
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
let timeout: NodeJS.Timeout
|
||
|
||
const loop = () => {
|
||
// choose a random image index
|
||
const randomIndex = Math.floor(Math.random() * shuffledImages.length)
|
||
setActiveIndex(randomIndex)
|
||
|
||
// wait a bit, then trigger next one
|
||
timeout = setTimeout(loop, 1000 + Math.random() * 2000) // every 1–3s
|
||
}
|
||
|
||
loop()
|
||
return () => clearTimeout(timeout)
|
||
}, [shuffledImages])
|
||
|
||
return (
|
||
<div className="relative w-full lg:absolute lg:inset-y-0 lg:left-0 lg:w-1/2">
|
||
<div
|
||
className="
|
||
grid grid-cols-6
|
||
lg:gap-x-[4px]
|
||
lg:gap-y-[4px]
|
||
gap-x-[1px]
|
||
gap-y-[1px]
|
||
p-2 lg:p-6
|
||
"
|
||
>
|
||
{shuffledImages.map((src, index) => (
|
||
<div
|
||
key={index}
|
||
className={`
|
||
relative aspect-square
|
||
w-[50px] h-[50px]
|
||
lg:w-auto lg:h-auto
|
||
transition duration-20 ease-in-out
|
||
${activeIndex === index ? 'grayscale-0' : 'grayscale'}
|
||
`}
|
||
>
|
||
<Image
|
||
src={src}
|
||
alt={`Team member ${index + 1}`}
|
||
fill
|
||
className="object-cover"
|
||
sizes="(max-width: 400px) 50px, (max-width: 1024px) 80px, 20vw"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|