Card

Card.tsx

import React from 'react';
import './Card.module.css';

export interface CardProps {
  title: string;
  description: string;
  imageUrl: string;
  onClick?: () => void;
}

const Card: React.FC<CardProps> = ({ title, description, imageUrl, onClick }) => {
  return (
    <div className="card" onClick={onClick}>
      <img className="card-image" src={imageUrl} alt={title} />
      <div className="card-content">
        <h3 className="card-title">{title}</h3>
        <p className="card-description">{description}</p>
      </div>
    </div>
  );
};

export default Card;

Card.module.css

.card {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 16px;
  width: 300px;
}

.card-image {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}

.card-content {
  margin-top: 16px;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.card-description {
  font-size: 16px;
  margin: 0;
}