Untitled
unknown
tsx
a year ago
1.8 kB
4
Indexable
Never
"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> ); }