Cursor実装体験（コード生成デモ）

import React, { useState, useEffect } from 'react';
import { Card, Badge, Button } from '../components/ui';
import { fetchProducts } from '../api/products';

const ProductList = ({ categoryFilter }) => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const loadProducts = async () => {
      setLoading(true);
      try {
        const data = await fetchProducts(categoryFilter);
        setProducts(data);
      } catch (error) {
        console.error('商品の読み込みに失敗しました', error);
      } finally {
        setLoading(false);
      }
    };
    
    loadProducts();
  }, [categoryFilter]);

  // 💡 Cursor AI提案: Suspenseを使った非同期データ取得に改善できます
  
  return (
    <div className="eco-products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {loading ? (
        Array(6).fill().map((_, i) => (
          <Card key={`skeleton-${i}`} className="animate-pulse" />
        ))
      ) : (
        products.map(product => (
          <Card key={product.id} className="product-card">
            <img src={product.image} alt={product.name} className="mb-2 rounded-t" />
            <div className="p-4">
              <Badge color={product.inStock ? 'green' : 'red'}>
                {product.inStock ? '在庫あり' : '在庫なし'}
              </Badge>
              <h3 className="text-lg font-semibold mt-2">{product.name}</h3>
              <p className="text-gray-600">¥{product.price.toLocaleString()}</p>
              <Button onClick={() => addToCart(product)} 
                     disabled={!product.inStock}>
                カートに追加
              </Button>
            </div>
          </Card>
        ))
      )}
    </div>
  );
};

export default ProductList;