src/components/styleExample/AdaptiveProductCard.tsx - master - d.vader/e2e

src/components/styleExample/AdaptiveProductCard.tsx
56 строк2 KB
Boris Meshcheryakov
initial commit
01 окт 2025, 09:22
01 окт 2025, 09:223edac10
// ProductCard.tsx
import { useState } from 'react';

interface ProductCardProps {
  imageUrl?: string;
  imageAlt?: string;
  title?: string;
  price?: number;
  onAddToCart?: () => void;
}

export const ProductCard: React.FC<ProductCardProps> = ({
  imageUrl,
  imageAlt,
  title,
  price,
//   onAddToCart,
}) => {
  const [isAdded, setIsAdded] = useState(false);

  const handleClick = () => {
    // onAddToCart();
    setIsAdded(true);
    // Через секунду сбрасываем статус "Добавлено"
    setTimeout(() => setIsAdded(false), 1000);
  };

  return (
    //   {/* Адаптивность: на мобильном ширина почти на весь экран, начиная с md - фиксированная ширина */}
    <article className="w-full max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden md:w-60 lg:w-72">
      {/* Семантический тег article для независимого контента */}
      <img
        src={imageUrl || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRalri-3Ea8ea_mw1uYrzNegC9SKrwuuQ65aw&usqp=CAU'}
        alt={imageAlt || 'Берег балт моря'} // Важно для доступности!
        className="w-full h-48 object-cover"
      />
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-800 mb-2">
          {title || 'Берег балт моря'}
        </h3>
        <p className="text-xl font-bold text-gray-900 mb-4">
          {price ||300 } руб.
        </p>
        <button
          onClick={handleClick}
          // Стилизованный фокус для доступности
          className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
          // Меняем текст для скринридера, чтобы сообщить о состоянии
          aria-label={isAdded ? `${title} добавлен в корзину` : `Добавить ${title} в корзину`}
        >
          {isAdded ? 'Добавлено!' : 'В корзину'}
        </button>
      </div>
    </article>
  );
};