day4

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["afterpay", "Belk"]
+  "cSpell.words": ["afterpay", "alldata", "Belk", "Outdoorsman", "Relph"]
 }

package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.2",
     "react-icons": "^4.7.1",
+    "react-paginate": "^8.1.4",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",

src/AllRoutes/AllRoutes.jsx

@@ -11,9 +11,7 @@ const AllRoutes = () => {
     <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/products/:path" element={<ProductsPage />} />
-      <Route path="/single" element={<SingleProductPage />} />
-      <Route path="/register" element={<RegisterPage />} />
-      <Route path="/signin" element={<Signin />} />
+      <Route path="/product/:id" element={<SingleProductPage />} />
     </Routes>
   );
 };

src/App.js

@@ -1,17 +1,15 @@
 import AllRoutes from "./AllRoutes/AllRoutes";
 import UpperFooter from "./components/UpperFooter";
-import HomePage from "./components/HomePage";
+
 import NavTop from "./components/Navbar/NavTop";
-import LowerFooter from "./components/LowerFooter";
 
 function App() {
   return (
-    <div>
+    <>
       <NavTop />
-
       <AllRoutes />
       <UpperFooter />
-    </div>
+    </>
   );
 }
 

src/components/Navbar/NavTop.jsx

@@ -1,36 +1,49 @@
-import React from 'react'
-import { FiSearch } from "react-icons/fi"
-import { RxCardStackPlus } from "react-icons/rx"
-import { AiFillDollarCircle } from "react-icons/ai"
-import { BsBagPlus } from "react-icons/bs"
-import "../../styles/NavTop.css"
-import Hamburger from './Hamburger'
-import NavBottom from './NavBottom'
-import AccountDropdown from '../Model'
-import { Link } from "react-scroll"
+import React from "react";
+import { FiSearch } from "react-icons/fi";
+import { RxCardStackPlus } from "react-icons/rx";
+import { AiFillDollarCircle } from "react-icons/ai";
+import { BsBagPlus } from "react-icons/bs";
+import "../../styles/NavTop.css";
+import Hamburger from "./Hamburger";
+import NavBottom from "./NavBottom";
+import AccountDropdown from "../Model";
 const NavTop = () => {
-
-    return (
-        <div div id='maindiv'>
-            <div className="container">
-                <Hamburger />
-                <div className="logo">
-                    <Link to={"home"} smooth duration={1500} >  <img src="https://i.ibb.co/d27npvV/Lint-trimmy-1.png" alt="logo" /></Link>
-                </div>
-                <div className="search">
-                    <input id='inp' type="text" placeholder="Search" />
-                    <span><FiSearch /></span>
-                </div>
-                <div className="icon_collection">
-                    <span><RxCardStackPlus /><p>Lint rewards+</p></span>
-                    <span><AiFillDollarCircle /><p>Coupons</p></span>
-                    <span><p id='mod'><AccountDropdown /></p></span>
-                    <span><BsBagPlus /><p>Bag</p></span>
-                </div>
-            </div>
-            <NavBottom />
+  return (
+    <div id="maindiv">
+      <div className="container">
+        <Hamburger />
+        <div className="logo">
+          <img src="https://i.ibb.co/d27npvV/Lint-trimmy-1.png" alt="logo" />
         </div>
-    )
-}
+        <div className="search">
+          <input id="inp" type="text" placeholder="Search" />
+          <span>
+            <FiSearch />
+          </span>
+        </div>
+        <div className="icon_collection">
+          <span>
+            <RxCardStackPlus />
+            <p>Lint rewards+</p>
+          </span>
+          <span>
+            <AiFillDollarCircle />
+            <p>Coupons</p>
+          </span>
+          <span>
+            <p id="mod">
+              <AccountDropdown />
+            </p>
+          </span>
+          <span>
+            <BsBagPlus />
+            <p>Bag</p>
+          </span>
+        </div>
+      </div>
+      <NavBottom />
+    </div>
+  );
+};
 
-export default NavTop
+export default NavTop;

src/components/pagination.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Flex, Button, Text, IconButton } from "@chakra-ui/react";
+import { RxDoubleArrowLeft, RxDoubleArrowRight } from "react-icons/rx";
+import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
+
+let BTN_COUNT = 5;
+
+const getStartingIdx = (current, total) => {
+  console.log("index");
+  if (total - current < 2)
+    return Math.max(current - (BTN_COUNT - 1 - total + current), 1);
+  return Math.max(current - 2, 1);
+};
+
+const Pagination = ({ current, total, handlePageChange }) => {
+  console.log("pagination");
+  let btns = [];
+  let start = getStartingIdx(current, total);
+  for (let i = start; i < Math.min(start + BTN_COUNT, total + 1); i++) {
+    btns.push(
+      <Button
+        key={i}
+        size="md"
+        background="transparent"
+        isDisabled={i === current}
+        onClick={() => handlePageChange(i)}>
+        {i}
+      </Button>
+    );
+  }
+  return (
+    <Flex gap="5px" mt="20px" align="center">
+      <IconButton
+        size="md"
+        display={current === 1 ? "none" : "flex"}
+        onClick={() => handlePageChange(1)}
+        bg="transparent"
+        aria-label="search productName"
+        icon={<RxDoubleArrowLeft />}
+      />
+      <IconButton
+        size="md"
+        display={current === 1 ? "none" : "flex"}
+        onClick={() => handlePageChange(current - 1)}
+        bg="transparent"
+        aria-label="search productName"
+        icon={<IoIosArrowBack />}
+      />
+      {btns}
+      <IconButton
+        size="md"
+        display={current === total ? "none" : "flex"}
+        onClick={() => handlePageChange(current + 1)}
+        bg="transparent"
+        aria-label="search productName"
+        icon={<IoIosArrowForward />}
+      />
+      <IconButton
+        size="md"
+        display={current === total ? "none" : "flex"}
+        onClick={() => handlePageChange(total)}
+        bg="transparent"
+        aria-label="search productName"
+        icon={<RxDoubleArrowRight />}
+      />
+    </Flex>
+  );
+};
+
+export default Pagination;

src/components/productsPage/filterDrawer.jsx

@@ -10,7 +10,7 @@ import {
 
 import Filters from "./filters";
 
-function FilterDrawer({ filterHeading, filterBrands, price }) {
+function FilterDrawer({ filterHeading, price }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
@@ -24,11 +24,7 @@ function FilterDrawer({ filterHeading, filterBrands, price }) {
       <Drawer placement={"left"} onClose={onClose} isOpen={isOpen}>
         <DrawerOverlay />
         <DrawerContent>
-          <Filters
-            filterHeading={filterHeading}
-            filterBrands={filterBrands}
-            price={price}
-          />
+          <Filters filterHeading={filterHeading} price={price} />
         </DrawerContent>
       </Drawer>
     </Box>