Dots removed

Author: joblessgod

src/components/Header.jsx

@@ -129,7 +129,7 @@ export default function Header() {
 
           <form className="hidden lg:flex">
             <input
-              className="border-primary-light border px-2 py-1 focus:border-secondary focus:outline-none focus:transition-all "
+              className="border border-primary-light px-2 py-1 focus:border-secondary focus:outline-none focus:transition-all "
               type="text"
               placeholder="Search"
             />

src/main.jsx

@@ -4,6 +4,7 @@ import App from "./App";
 import "./index.css";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
+import 'react-loading-skeleton/dist/skeleton.css'
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>

src/pages/Home.jsx

@@ -5,18 +5,22 @@ import Slider from "react-slick";
 import Products from "../pages/Products";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
 
 export default function Home() {
+  const [isLoading, setIsLoading] = useState(true);
+
   const settings = {
     dots: true,
     infinite: true,
     slidesToShow: 1,
     slidesToScroll: 1,
-    autoplay: true,
+    autoplay: false,
     autoplaySpeed: 2000,
     pauseOnHover: true,
     initialSlide: 0,
     arrows: false,
+    dots:false,
     responsive: [
       {
         breakpoint: 1024,
@@ -68,14 +72,15 @@ export default function Home() {
       .then((res) => {
         console.log(res);
         setProducts(res.data.data);
-        isLoading(false);
+        setIsLoading(false);
       })
       .catch((err) => {});
   }, []);
 
   return (
     <>
       <Slider {...settings}>
+        {isLoading && <Skeleton className="h-[576px]" />}
         {banners.map((el) => {
           return (
             <Banner
@@ -92,8 +97,27 @@ export default function Home() {
 
       <div className="container grid   gap-4 py-[116px] sm:py-[130px] md:grid-cols-2 md:py-[148px] lg:grid-cols-4 lg:py-[166px] xl:py-[188px] xxl:py-[210px]">
         {products.map((el) => {
-          return <Products name={el.name} price={el.price} image={el.image} />;
+          return (
+            <>
+              <Products
+                key={el._id}
+                id={el._id}
+                name={el.name}
+                price={el.price}
+                image={el.image}
+              />
+            </>
+          );
         })}
+        {isLoading && (
+          <>
+            <Skeleton className="h-[250px]" />
+            <Skeleton className="h-[250px]" />
+            <Skeleton className="h-[250px]" />
+            <Skeleton className="h-[250px]" />
+          </>
+        )}
+        {!isLoading && products.length == 0 && <>no product found</>}
       </div>
     </>
   );

src/pages/Products.jsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { FaCartPlus } from "react-icons/fa";
-import BreadCrumb from "../components/BreadCrumb";
 
 export default function Products(props) {
   return (
     <>
-      <div className=" bg-primary-light group relative   shadow-[0px_0px_25px_0px_rgba(0,0,0,0.1)]  ">
+      <div className=" group relative bg-primary-light   shadow-[0px_0px_25px_0px_rgba(0,0,0,0.1)]  ">
         <div className=" absolute left-[11px] top-[11px] hidden h-[30px] w-[30px] items-center justify-center rounded-full border border-primary transition-all group-hover:flex">
           <FaCartPlus className="text-primary" />
         </div>