ProductSection.tsx 1.5 KB

12345678910111213141516171819202122232425262728293031
  1. import React from 'react';
  2. const products = [
  3. { id: 1, name: '青花旗袍', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80' },
  4. { id: 2, name: '水墨长裙', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80' },
  5. { id: 3, name: '竹韵套装', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80' },
  6. { id: 4, name: '山水外套', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80' },
  7. ];
  8. const ProductSection: React.FC = () => {
  9. return (
  10. <section className="py-16 bg-gray-50">
  11. <div className="container mx-auto px-4">
  12. <h2 className="text-3xl font-bold text-center mb-12">精选系列</h2>
  13. <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
  14. {products.map((product) => (
  15. <div key={product.id} className="bg-white rounded-lg shadow-md overflow-hidden">
  16. <img src={product.image} alt={product.name} className="w-full h-64 object-cover" />
  17. <div className="p-4">
  18. <h3 className="text-xl font-semibold mb-2">{product.name}</h3>
  19. <a href="#" className="text-blue-600 hover:underline">查看详情</a>
  20. </div>
  21. </div>
  22. ))}
  23. </div>
  24. </div>
  25. </section>
  26. );
  27. };
  28. export default ProductSection;