product-fix-layout

package.json

@@ -27,6 +27,7 @@
     "react-circular-progressbar": "2.0.1",
     "react-dom": "18.2.0",
     "react-icons": "^4.10.1",
+    "react-responsive-carousel": "^3.2.23",
     "superjson": "^1.12.4",
     "tailwind-merge": "^1.14.0",
     "typeface-inter": "^3.18.1",

src/components/Navbar.tsx

@@ -5,7 +5,17 @@ import { AnimatePresence, motion } from "framer-motion"
 import { useMainText, useSlider3D } from "~/hooks"
 import { Button } from "./ui/Button"
 import useMain from "~/hooks/useMain"
-
+import { PiShoppingCartFill } from "react-icons/pi"
+const CartIcon = () => {
+  return (
+    <div className="absolute top-1 -right-6">
+      <PiShoppingCartFill className=" relative w-6 h-6" />
+      <div className="absolute -bottom-1 -right-1 rounded-full w-4 h-4 block bg-cta text-[12px] font-bold text-center">
+        1
+      </div>
+    </div>
+  )
+}
 export function Navbar() {
   const [isHamburgerMenu, setHamburgerMenu] = useState<boolean>(false)
   const slider3D = useSlider3D()
@@ -75,6 +85,7 @@ export function Navbar() {
                   href={navLink.href}>
                   {navLink.label}
                 </Button>
+                {navLink.label === "Cart" && <CartIcon />}
               </li>
             ))}
           </ul>

src/components/pages/product/Carousel.tsx

@@ -0,0 +1,28 @@
+"use client"
+import React from "react"
+import { Carousel } from "react-responsive-carousel"
+import "react-responsive-carousel/lib/styles/carousel.min.css"
+
+const ImgCarousel = ({ imagesUrl }: { imagesUrl: string[] }) => {
+  return (
+    <Carousel
+      autoPlay
+      showStatus={false}
+      showArrows={true}
+      infiniteLoop
+      showIndicators={false}
+      interval={5000}
+      className="h-full">
+      {imagesUrl.map((imageUrl, index) => {
+        return (
+          <div key={index} className="h-full">
+            {/*Doesn't work properly with Next.js <Image/>*/}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={imageUrl} alt="Img" className="h-full object-cover object-center" />
+          </div>
+        )
+      })}
+    </Carousel>
+  )
+}
+export default ImgCarousel

src/components/pages/products/GridView.tsx

@@ -14,7 +14,7 @@ const GridView = ({ products }: { products: Product[] }) => {
   return (
     <section className="scrollbar grid max-h-[75vh] grid-cols-1 gap-4 overflow-y-scroll tablet:grid-cols-2 laptop:grid-cols-3">
       {products.map((product, index) => (
-        <section key={index} className="group relative mx-4 mb-8 overflow-hidden rounded-t-2xl">
+        <section key={index} className="group relative laptop:mx-4 mb-8 overflow-hidden rounded-t-2xl">
           <Link href={`product?id=${product.id}`}>
             <Image
               className="aspect-video object-cover object-center duration-300  scale-100 group-hover:scale-110"
@@ -24,8 +24,8 @@ const GridView = ({ products }: { products: Product[] }) => {
               height={720}
             />
           </Link>
-          <div className="font-primary absolute bottom-0 flex w-full justify-between bg-gray-800 bg-opacity-50  px-1 text-[14px] capitalize text-white tablet:text-xs laptop:text-md ">
-            <span>{product.title}</span>
+          <div className="font-primary truncate flex-nowrap absolute bottom-0 flex w-full justify-between bg-gray-800 bg-opacity-50  px-1  capitalize text-white text-md laptop:text-sm ">
+            <span className="truncate">{product.title}</span>
             <span className="text-cta">{priceFormatter(product.price)}</span>
           </div>
         </section>

src/globals.css

@@ -37,25 +37,30 @@ body,
 
 /* remove scroll on mobile */
 @media screen and (max-width: 768px) {
+  #__next::-webkit-scrollbar,
   .scrollbar::-webkit-scrollbar {
     display: none;
   }
 }
 
 @layer utilities {
+  #__next::-webkit-scrollbar,
   .scrollbar::-webkit-scrollbar {
     width: 18px;
     height: 18px;
   }
 
+  #__next::-webkit-scrollbar-track,
   .scrollbar::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.6);
   }
 
+  #__next::-webkit-scrollbar-thumb,
   .scrollbar::-webkit-scrollbar-thumb {
     background: rgba(7, 7, 10, 0.4);
   }
 
+  #__next::-webkit-scrollbar-thumb:hover,
   .scrollbar::-webkit-scrollbar-thumb:hover {
     background: rgba(7, 7, 10, 0.4);
   }
@@ -249,3 +254,39 @@ input[type="radio"]:checked + .label:after {
     transform: translateY(-85%);
   }
 }
+
+/* Product page > Carousel */
+.carousel {
+  text-align: center;
+  background-color: rgba(7, 7, 10, 0.75);
+}
+.carousel > .thumbs-wrapper {
+  /* display: none !important; */
+  margin: 0 !important;
+  height: 12vh;
+  display: flex;
+  justify-content: center;
+}
+.thumbs {
+  padding: 10px 3px !important;
+  height: 100%;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.thumb {
+  width: 100% !important;
+  scale: 0.75;
+  border: none !important;
+}
+li.thumb.selected {
+  scale: 1.1;
+  border: none !important;
+}
+.carousel-slider,
+.slider-wrapper,
+.slider,
+.slide,
+.slide > div {
+  height: 100% !important;
+}