Project: nextjs
Task (challenging): 1) In components/Cart.tsx, create an appealing cart button .cart-button that shows the number of items in the cart. When clicked, it shows a popover of all items in the cart. Wrap Product Title, image, quantity (.cart-item-quantity), remove button (.cart-item-remove) in #cart_item_{product_id} 2) In the Detail Page, add an .add-to-cart-button. When clicked, add this product to the cart. 3) Store Cart Info in the DB for the current User. 4) Place Shopping Cart which can be seen in every page in the right-bottom of page 5) Create CSS file to beautify CSS. Constraint: DO NOT use a third-party UI library.