Промпт для frontend-разработчика и создания ТЗ на компоненты

import React from 'react';

interface Props {
  title: string;
  price: number;
  imgUrl: string;
  isLoading?: boolean;
}

export const ProductCard: React.FC<Props> = ({ title, price, imgUrl, isLoading }) => {
  if (isLoading) return <div className="animate-pulse bg-gray-200 dark:bg-gray-700 h-64 w-full rounded-lg" />;

  return (
    <article className="group relative flex flex-col rounded-lg border p-4 transition-shadow hover:shadow-lg dark:bg-slate-900 dark:border-slate-800">
      <div className="aspect-square overflow-hidden rounded-md bg-gray-100">
        <img 
          src={imgUrl} 
          alt={title} 
          loading="lazy" 
          className="h-full w-full object-cover group-hover:scale-105 transition-transform"
        />
      </div>
      <h3 className="mt-4 text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
      <p className="mt-1 text-lg font-bold text-indigo-600 dark:text-indigo-400">{price} ₽</p>
      <button className="mt-3 w-full rounded-md bg-indigo-600 py-2 text-sm text-white hover:bg-indigo-700">
        В корзину
      </button>
    </article>
  );
};