forked from ourworld_web/www_engage_os
		
	feat: add team member gallery with profile images and randomized grid layout
This commit is contained in:
		
							
								
								
									
										43
									
								
								src/components/Gallery.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										43
									
								
								src/components/Gallery.tsx
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,43 @@
 | 
			
		||||
import Image from 'next/image'
 | 
			
		||||
 | 
			
		||||
const images = [
 | 
			
		||||
  '/images/people/abdulrahman_elawady.jpg',
 | 
			
		||||
  '/images/people/adnan_fatayerji.jpg',
 | 
			
		||||
  '/images/people/ahmed_hanafy.jpg',
 | 
			
		||||
  '/images/people/ahmed_thabet.jpg',
 | 
			
		||||
  '/images/people/alaa_mahmoud.jpg',
 | 
			
		||||
  '/images/people/alexandre_hannelas.jpeg',
 | 
			
		||||
  '/images/people/amira_abouhadid.jpg',
 | 
			
		||||
  '/images/people/ashraf_fouda.jpeg',
 | 
			
		||||
  '/images/people/atef_nazmy.jpg',
 | 
			
		||||
  '/images/people/bernadette_amanda_caster.jpg',
 | 
			
		||||
  '/images/people/cameron_ramraichan_labeyrie.jpg',
 | 
			
		||||
  '/images/people/ehab_hassan.jpg',
 | 
			
		||||
  '/images/people/eslam_nawara.jpg',
 | 
			
		||||
  '/images/people/evon_yacoub.jpg',
 | 
			
		||||
  '/images/people/florian_fournier.jpeg',
 | 
			
		||||
  '/images/people/gregory_flipo.jpg',
 | 
			
		||||
  '/images/people/jan_de_landtsheer.jpeg',
 | 
			
		||||
  '/images/people/karoline_zizka.jpeg',
 | 
			
		||||
  '/images/people/khaled.jpg',
 | 
			
		||||
  '/images/people/kristof_de_spiegeleer.jpeg',
 | 
			
		||||
].sort(() => Math.random() - 0.5) // Shuffle the array
 | 
			
		||||
 | 
			
		||||
export function Gallery() {
 | 
			
		||||
  return (
 | 
			
		||||
    <div className="hidden lg:absolute lg:inset-y-0 lg:left-0 lg:block lg:w-1/2">
 | 
			
		||||
      <div className="grid h-full grid-cols-5 grid-rows-4">
 | 
			
		||||
        {images.map((src, index) => (
 | 
			
		||||
          <Image
 | 
			
		||||
            key={index}
 | 
			
		||||
            src={src}
 | 
			
		||||
            alt={`Team member ${index + 1}`}
 | 
			
		||||
            width={129}
 | 
			
		||||
            height={129}
 | 
			
		||||
            className="object-cover"
 | 
			
		||||
          />
 | 
			
		||||
        ))}
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  )
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user