ImageCard

ImageCard.tsx

import React from "react";

const images = [
  {
    imageUrl: "https://picsum.photos/id/1018/400/300",
    title: "Image 1",
    description: "This is the first image"
  },
  {
    imageUrl: "https://picsum.photos/id/1019/400/300",
    title: "Image 2",
    description: "This is the second image"
  },
  {
    imageUrl: "https://picsum.photos/id/1020/400/300",
    title: "Image 3",
    description: "This is the third image"
  }
];

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

const ImageCard = ({ imageUrl, title, description }: ImageCardProps) => {
  return (
    <div className="image-card">
      <img src={imageUrl} alt={title} />
      <div className="image-card-content">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
};

export default ImageCard;

ImageCard.module.css

.image-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.image-card-content {
  padding: 10px;
  text-align: center;
}

.image-card-content h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.image-card-content p {
  margin: 5px 0 0;
  font-size: 0.8rem;
  color: gray;
}