Next.js Discord

Discord Forum

Shadcn Component Implementation

Answered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
Hello! 👋
I'm trying to implement the sheet component by shadcn to my project, I want it that when you press on the product's card, the sheet pops up from the bottom with the information of the product.

On the following GitHub repo I will be sharing the code I made to try accomplish the objective, but the problem is that the sheet doesn't appear, the product card is pushed a bit down and there isn't any errors both the web inspector and the console.

Hopefully someone can help me, (this is a big skill issue)

https://github.com/yoboywhat/shadcn-component-issue/tree/main/components
Answered by oliver
ProductCard.tsx
<ProdInf
  productData={{
    id: id,
    name: name,
    description: description,
    img: img,
    price: price,
    stock: stock,
    sale: sale,
    category: category,
  }}
>
  <div className="cursor-pointer group">
    <div className="relative">
      <Image
        className="w-full"
        src={img}
        width={1000}
        height={1142}
        alt={name}
      />

      {sale && (
        <div className="bg-red-600 inline-block absolute top-0 left-0 text-[14px] text-white rounded-md px-2 py-[2px] m-4">
          SALE
        </div>
      )}

      <div
        className="absolute top-0 left-0 w-full h-full bg-[#00000050] opacity-0
                transition-opacity duration-500 group-hover:opacity-100 cursor-pointer"
      >
        <div className="absolute bottom-0 mb-4 left-[50%] translate-x-[-50%] flex gap-2">
          <div className="bg-white w-[50px] h-[50px] text-[26px] grid place-items-center">
            <AiOutlineHeart />
          </div>
          <div
            className="bg-white w-[50px] h-[50px] text-[26px] grid place-items-center"
            onClick={addProductToCart}
          >
            <AiOutlineShoppingCart />
          </div>
        </div>
      </div>
    </div>

    <p className="text-gray-400 font-light">{category[0]}</p>
    <h2 className="font-medium pb-3 hover:text-accent">{name}</h2>
    <p className="text-gray-400 font-light">${price}.00</p>
  </div>
</ProdInf>;
View full answer

29 Replies

Masai LionOP
Pls don’t let this die pls
Masai LionOP
hi, i still need help
oliver
Your current component logic is not correct
You have to make your product card SheetTrigger for your purpose
Or if you want to control sheet without trigger, you can use open and onOpenChange props
oliver
You can modify your code like this
oliver
ProductCard.tsx
<ProdInf
  productData={{
    id: id,
    name: name,
    description: description,
    img: img,
    price: price,
    stock: stock,
    sale: sale,
    category: category,
  }}
>
  <div className="cursor-pointer group">
    <div className="relative">
      <Image
        className="w-full"
        src={img}
        width={1000}
        height={1142}
        alt={name}
      />

      {sale && (
        <div className="bg-red-600 inline-block absolute top-0 left-0 text-[14px] text-white rounded-md px-2 py-[2px] m-4">
          SALE
        </div>
      )}

      <div
        className="absolute top-0 left-0 w-full h-full bg-[#00000050] opacity-0
                transition-opacity duration-500 group-hover:opacity-100 cursor-pointer"
      >
        <div className="absolute bottom-0 mb-4 left-[50%] translate-x-[-50%] flex gap-2">
          <div className="bg-white w-[50px] h-[50px] text-[26px] grid place-items-center">
            <AiOutlineHeart />
          </div>
          <div
            className="bg-white w-[50px] h-[50px] text-[26px] grid place-items-center"
            onClick={addProductToCart}
          >
            <AiOutlineShoppingCart />
          </div>
        </div>
      </div>
    </div>

    <p className="text-gray-400 font-light">{category[0]}</p>
    <h2 className="font-medium pb-3 hover:text-accent">{name}</h2>
    <p className="text-gray-400 font-light">${price}.00</p>
  </div>
</ProdInf>;
Answer
oliver
prodInf.tsx
const ProdInf: React.FC<{
  children: React.ReactNode;
  productData: IProduct;
}> = ({ children, productData }) => {
  return (
    <Sheet>
      {/* Pass toggleSheet function to SheetTrigger */}
      <SheetTrigger>{children}</SheetTrigger>
      <SheetContent side="bottom">
        <SheetHeader>
          <SheetTitle>I´m trying this out</SheetTitle>
          <SheetDescription>Lorem Impsum bla bla</SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  );
};
oliver
when do you need to show sheet?
@oliver when do you need to show sheet?
Masai LionOP
when the visitor/user clicks on the product card
oliver
yes so I made the product card sheet trigger
clicking product card will trigger sheet showing
Masai LionOP
because the product card is just a small component that shows an image, the name and the category of the product, and when you click on it, the sheet should appear so it works like "more details"
@oliver clicking product card will trigger sheet showing
Masai LionOP
oh, thanks! you are my saviour. i am going to try it out and let you know what happens 🙂
oliver
welcome
@oliver clicking product card will trigger sheet showing
Masai LionOP
so then I should keep this line I suppose
<div 
        className="cursor-pointer group"
         onClick={() => SheetTrigger}
        >
oliver
you don't need it
@oliver you don't need it
Masai LionOP
true, because shadcn component already handles that as far as I see
think so lol
i am keeping that div and just deleting the onClick func
and wrapping it with ProdInf
oliver
yeah you are right
@oliver yeah you are right
Masai LionOP
lol sorry, I am just trying to understand the code hehehe : )
oliver
if you have any other questions, feel free to ask
Masai LionOP
@oliver thanks!