Untitled

"use client";

import productsData from "@/resources/productsData";
import { Button } from "@nextui-org/button";
import { Card, CardBody, CardFooter, Image } from "@nextui-org/react";
export default function Home() {
  return (
    <main>
      <section>
        <div className="container pb-5 gap-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
          {productsData.map((item, index) => (
            <Card
              shadow="md"
              key={index}
              isPressable
              onPress={() => console.log("item pressed")}
              className="border border-[#444]"
            >
              <CardBody className="overflow-visible p-0">
                <Image
                  shadow="sm"
                  radius="lg"
                  width="100%"
                  alt={item.title}
                  className="w-full object-cover h-[240px]"
                  src={item.img}
                />
              </CardBody>
              <CardFooter className="w-full gap-3 flex flex-col items-end">
                <div className="text-large mt-1 flex justify-between w-full">
                  <b>{item.title}</b>
                  <p className="text-default-600">${item.price}</p>
                </div>
                <div className="flex justify-between items-center w-full">
                  <p>{item.quantity} Sold Out</p>
                  <Button
                    size="md"
                    color="success"
                    radius="sm"
                    className="font-medium"
                  >
                    Add to cart
                  </Button>
                </div>
              </CardFooter>
            </Card>
          ))}
        </div>
      </section>
    </main>
  );
}