ImageList

ImageList.tsx

import { useState } from 'react';
import styles from './ImageList.module.css';

export type Image = {
  id: string;
  url: string;
  alt: string;
};

type ImageListProps = {
  images: Image[];
  onSelect?: (image: Image) => void;
};

const ImageList = ({ images, onSelect }: ImageListProps) => {
  const [selectedImage, setSelectedImage] = useState<Image | null>(null);

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

  return (
    <div className={styles.imageList}>
      {images.map((image) => (
        <img
          key={image.id}
          src={image.url}
          alt={image.alt}
          className={selectedImage?.id === image.id ? styles.selected : ''}
          onClick={() => handleImageClick(image)}
        />
      ))}
    </div>
  );
};

export default ImageList;

ImageList.module.css

.imageList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.imageList img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: border 0.2s ease-in-out;
}

.imageList img.selected {
  border: 2px solid #007aff;
}