Products.js

import React from 'react'
import { ProductCard } from './ProductCard'

export default function Products({ products }) {
    return (
        <div className='bg-white'>
            <div className='max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8'>
                <h2 className='text-2xl font-extrabold text-black mb-6'>
                    Products
                </h2>
                <div className="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                    {products.map(product =>
                        <ProductCard key={product.node.id} product={product} state={false} />
                    )}
                </div>
            </div>
        </div>
    )
}