ImageGallery

ImageGallery.tsx

import { useState } from 'react';
import { ImageCard } from './ImageCard';

import styles from './ImageGallery.module.css';

interface Image {
  imageUrl: string;
  title: string;
  description: string;
}

interface ImageGalleryProps {
  images: Image[];
}

export const ImageGallery = ({ images }: ImageGalleryProps) => {
  const [selectedImage, setSelectedImage] = useState(images[0]);

  const handleImageClick = (image: Image) => {
    setSelectedImage(image);
  };

  return (
    <div className={styles.gallery}>
      <div className={styles.imageList}>
        {images.map((image) => (
          <div
            key={image.imageUrl}
            className={`${styles.imageContainer} ${
              selectedImage.imageUrl === image.imageUrl ? styles.selected : ''
            }`}
            onClick={() => handleImageClick(image)}
          >
            <img
              src={image.imageUrl}
              alt={image.title}
              className={styles.image}
            />
          </div>
        ))}
      </div>
      <div className={styles.selectedImage}>
        <ImageCard
          imageUrl={selectedImage.imageUrl}
          title={selectedImage.title}
          description={selectedImage.description}
        />
      </div>
    </div>
  );
};

ImageGallery.module.css

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.imageList {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.selectedImage {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.imageContainer {
  width: 100%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.selected {
  border-color: #0077cc;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}