fix: UI, newfeature: Price Filter⚡

package.json

@@ -3,11 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fontsource/roboto": "^5.0.14",
+    "@mui/material": "^5.16.7",
+    "@nextui-org/image": "^2.0.31",
+    "@nextui-org/react": "^2.4.6",
+    "@nextui-org/slider": "^2.2.15",
+    "@react-aria/grid": "^3.10.3",
+    "@react-aria/interactions": "^3.22.2",
+    "@react-aria/toggle": "^3.10.7",
     "@reduxjs/toolkit": "^2.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.20.2",
     "bootstrap": "^5.3.2",
+    "framer-motion": "^11.3.29",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",

src/App.js

@@ -13,7 +13,7 @@ import Footer from "./components/Footer";
 
 function App() {
   return (
-    <div className="bg-gray-50 m-0 p-0">
+    <div className="bg-gray-50 m-0 p-0 font-sans">
       <Header />
       <Routes>
         <Route path="/" element={<Home />} />

src/components/About.js

@@ -1,6 +1,6 @@
 const About = () => {
   return (
-    <div className="bg-gray-50 text-black min-h-screen tracking-wider overflow-x-hidden text-justify">
+    <div className="text-black min-h-screen tracking-wider overflow-x-hidden text-justify">
       <div className="container mx-auto px-4 py-12">
         <h1 className="text-4xl font-semibold mb-6">About Us</h1>
         <div className="pt-6">

src/components/Cards.js

@@ -1,16 +1,19 @@
 import React, { useEffect, useState } from "react";
-import InfiniteScroll from "react-infinite-scroll-component";
 import Loader from "./Loader";
 import { useDispatch } from "react-redux";
 import { addItem } from "../redux/slices/cartSlice";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { FaCheckCircle } from "react-icons/fa";
+import { Pagination } from "antd";
 
-function MyCard() {
+function MyCard({ priceRange }) {
   const dispatch = useDispatch();
   const [allProducts, setAllProducts] = useState([]);
-  const [limit, setLimit] = useState(8);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const itemsPerPage = 15;
+  const totalItems = 35;
 
   const handleCartClick = (product) => {
     dispatch(
@@ -32,47 +35,64 @@ function MyCard() {
     });
   };
 
-  useEffect(() => {
-    fetchMoreData();
-  }, [limit]);
-
-  const fetchMoreData = () => {
-    fetch(`https://dummyjson.com/products/search?q=fashion&limit=${limit}`)
+  const fetchProducts = () => {
+    setLoading(true);
+    fetch(
+      `
+      https://dummyjson.com/products?limit=${itemsPerPage}&skip=${
+        (currentPage + 3) * itemsPerPage
+      }&select=title,price,description,thumbnail`
+    )
       .then((response) => response.json())
       .then((result) => {
-        setAllProducts((prevProducts) => [...prevProducts, ...result.products]);
+        setAllProducts(result.products);
+        setLoading(false);
       })
-      .catch((error) => console.error("Error fetching data:", error));
+      .catch((error) => {
+        console.error("Error fetching data:", error);
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, [currentPage]);
+
+  // Filtering products based on price range
+  const filteredProducts = allProducts.filter(
+    (product) =>
+      product.price >= priceRange[0] && product.price <= priceRange[1]
+  );
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
   };
 
   return (
-    <div
-      id="scrollableDiv"
-      className="px-5 h-[515px] md:h-[850px] lg:h-[530px] overflow-y-scroll"
-    >
-      <InfiniteScroll
-        dataLength={allProducts.length}
-        next={() => setLimit((prev) => prev + 10)}
-        hasMore={allProducts.length < 80}
-        loader={<Loader />}
-        scrollableTarget="scrollableDiv"
-        className="overflow-x-hidden"
-      >
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {allProducts.map((product) => (
+    <div className="px-5">
+      {loading ? (
+        <Loader />
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-2 min-h-screen">
+          {filteredProducts.map((product) => (
             <div
               key={product.id}
-              className="bg-white m-2 p-4 shadow-md rounded-lg"
+              className="m-2 p-4 shadow-md rounded-lg h-[345px]"
             >
-              <img
-                src={product.thumbnail}
-                className="w-full h-40 object-cover brightness-110 shadow-sm"
-                alt={product.title}
-              />
+              <div className="h-[155px] relative bg-gradient-to-br from-[#ffffff] to-[#00000011] rounded-lg flex justify-center items-center overflow-visible">
+                <div className="flex">
+                  <img
+                    src={product.thumbnail}
+                    className="h-48 w-80 object-cover brightness-20 contrast-150 transform -translate-x-12 translate-y-2 md:translate-y-3"
+                    alt={product.title}
+                  />
+                </div>
+              </div>
+
               <div className="text-center py-4">
                 <h5 className="font-light text-black">
-                  {product.title.length > 28
-                    ? `${product.title.slice(0, 28)}...`
+                  {product.title.length > 11
+                    ? `${product.title.slice(0, 15)}`
                     : product.title}
                 </h5>
                 <p className="text-gray-700">${product.price.toFixed(2)}</p>
@@ -86,7 +106,15 @@ function MyCard() {
             </div>
           ))}
         </div>
-      </InfiniteScroll>
+      )}
+      <Pagination
+        current={currentPage}
+        onChange={handlePageChange}
+        total={totalItems}
+        align={"center"}
+        borderRadiusLG
+        className="m-10"
+      />
       <ToastContainer />
     </div>
   );

src/components/CartEmpty.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import cartGif from "./utils/images/cartgif.gif";
 
 const CartEmpty = () => {
-  const cartGif = "https://shoppie-img.static.domains/cartgif.gif";
+  // const cartGif = "https://shoppie-img.static.domains/cartgif.gif";
 
   return (
     <div className="container mx-auto flex flex-col items-center justify-center p-2">

src/components/Contact.js

@@ -1,6 +1,6 @@
 const Contact = () => {
   return (
-    <div className="bg-gray-50 text-black min-h-screen overflow-x-hidden">
+    <div className=" text-black min-h-screen overflow-x-hidden">
       <div className="container mx-auto px-4 py-12">
         <h1 className="text-4xl font-semibold mb-6">Contact Us</h1>
         <p className="text-lg leading-relaxed mb-8">

src/components/Home.js

@@ -1,53 +1,29 @@
 import { NavLink } from "react-router-dom";
-
+import bg from "./utils/images/img3.png";
+import Slider from "./Slider";
 const Home = () => {
-  const baseUrl = "https://shoppie-img.static.domains/";
-  const imageNames = [
-    "img1.jpg",
-    "img2.jpg",
-    "img3.png",
-    "img4.jpg",
-    "img5.jpg",
-  ];
-  const images = imageNames.map((name) => `${baseUrl}${name}`);
-
   return (
-    <div className="bg-gray-50 overflow-x-hidden">
-      <div className="flex flex-col items-center justify-center text-center py-20 px-2">
-        <h1 className="text-4xl md:text-7xl font-thin text-black mb-4 uppercase -tracking-tighter">
-          Experience the Height of Fashion
+    <div className="overflow-x-hidden flex flex-col items-center justify-center relative h-screen">
+      {/* Background Image */}
+      <div className="absolute top-0 left-[100px] md:top-25 md:left-[200px] w-[180px] h-60 lg:w-[240px] lg:h-80 ">
+        <img src={bg} className="" alt="Background" />
+      </div>
+
+      {/* Hero Section */}
+      <div className="relative text-center py-20 px-4 max-w-3xl mx-auto">
+        <h1 className="text-4xl md:text-6xl font-bold text-black mb-4 uppercase tracking-tight">
+          Uncover Top <span className="text-[#292929ca]">Trends</span> Across
+          All Categories
         </h1>
-        <h2 className="text-lg md:text-2xl font-extralight text-gray-600 mb-8 tracking-wider">
-          Discover our exclusive designer pieces that embody sophistication and
-          style.
+        <h2 className="text-lg md:text-2xl font-light text-gray-800 mb-8">
+          Explore Exclusive Picks and Essentials Tailored for You
         </h2>
         <NavLink to="/products">
-          <button className="bg-black text-white px-6 py-2 rounded-lg">
+          <button className="bg-black text-white px-8 py-3 rounded-lg shadow-lg hover:bg-gray-800 transition">
             Discover More Products
           </button>
         </NavLink>
-      </div>
-
-      <div className="flex flex-wrap justify-center">
-        {images.map((img, index) => (
-          <div
-            key={index}
-            className={`w-full md:w-1/2 p-4 ${
-              index % 2 === 0 ? "text-left" : "text-right"
-            }`}
-          >
-            <img
-              src={img}
-              alt="fashion model"
-              className="w-full h-auto rounded-lg mb-4"
-            />
-            <p className="text-lg md:text-xl text-gray-800">
-              {index % 2 === 0
-                ? "Our designs reflect your personality."
-                : "Fashion that speaks your language."}
-            </p>
-          </div>
-        ))}
+        {/* <Slider /> */}
       </div>
     </div>
   );

src/components/Loader.js

@@ -2,17 +2,17 @@ import React from "react";
 
 function Loader() {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-      {Array(8)
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+      {Array(20)
         .fill()
         .map((_, index) => (
-          <div key={index} className="bg-gray-50">
+          <div key={index} className="">
             <div className="m-2 p-4 shadow-md border-none rounded-lg bg-white animate-pulse">
-              <div className="w-80 h-40 bg-gray-200 rounded-lg mb-4"></div>
-              <div className="space-y-2">
-                <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+              <div className="w-70 h-40 bg-gray-200 rounded-lg mb-4"></div>
+              <div className="space-y-2 flex flex-col items-center justify-center">
+                <div className="h-4 bg-gray-200 rounded w-3/4 "></div>
                 <div className="h-4 bg-gray-200 rounded w-1/2"></div>
-                <div className="h-10 bg-gray-300 rounded-lg mt-4"></div>
+                <div className="h-8 bg-gray-300 rounded-lg w-1/3 mt-4"></div>
               </div>
             </div>
           </div>

src/components/Products.js

@@ -1,8 +1,24 @@
-import Cards from "./Cards";
+import React, { useState } from "react";
+import Cards from "./Cards.js";
+import Slider from "./Slider.js";
+
 const Products = () => {
+  const [priceRange, setPriceRange] = useState([0, 500]);
+
+  const handlePriceChange = (newRange) => {
+    setPriceRange(newRange);
+  };
+
   return (
-    <div className="">
-      <Cards />
+    <div>
+      <div className="mt-4 flex flex-col  justify-center    items-center">
+        <h6>Select Your Price Range</h6>
+        <div className="mt-3 mb-4">
+          <Slider onChangePrice={handlePriceChange} />
+        </div>
+      </div>
+      {/* Filtered Products */}
+      <Cards priceRange={priceRange} />
     </div>
   );
 };

src/components/Slider.js

@@ -0,0 +1,70 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Slider from "@mui/material/Slider";
+import Typography from "@mui/material/Typography";
+
+const MAX = 500;
+const MIN = 0;
+const marks = [
+  {
+    value: MIN,
+    label: "",
+  },
+  {
+    value: MAX,
+    label: "",
+  },
+];
+
+export default function CustomMarks({ onChangePrice }) {
+  const [val, setVal] = React.useState([MIN, MAX]);
+
+  const handleChange = (_, newValue) => {
+    setVal(newValue);
+    onChangePrice(newValue); // Passing the new value to parent component
+  };
+
+  return (
+    <Box sx={{ width: 150 }}>
+      <Slider
+        marks={marks}
+        step={10}
+        value={val}
+        valueLabelDisplay="auto"
+        min={MIN}
+        max={MAX}
+        onChange={handleChange}
+        aria-labelledby="range-slider"
+        valueLabelFormat={(x) => `${x}$`}
+        sx={{
+          color: "black", // Change the slider color to black
+          "& .MuiSlider-thumb": {
+            backgroundColor: "black", // Thumb color
+          },
+          "& .MuiSlider-track": {
+            backgroundColor: "black", // Track color
+          },
+          "& .MuiSlider-rail": {
+            backgroundColor: "#ddd", // Rail color (optional, to contrast the track)
+          },
+        }}
+      />
+      <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+        <Typography
+          variant="body2"
+          onClick={() => setVal([MIN, val[1]])}
+          sx={{ cursor: "pointer" }}
+        >
+          {MIN}$
+        </Typography>
+        <Typography
+          variant="body2"
+          onClick={() => setVal([val[0], MAX])}
+          sx={{ cursor: "pointer" }}
+        >
+          {MAX}$
+        </Typography>
+      </Box>
+    </Box>
+  );
+}

src/components/Success.js

@@ -8,7 +8,7 @@ const Success = () => {
       <img
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Eo_circle_green_white_checkmark.svg/2048px-Eo_circle_green_white_checkmark.svg.png"
         alt="green tick"
-        className="w-20 h-20 grayscale"
+        className="w-20 h-20 "
       />
       <h1 className="text-xl tracking-wide font-bold">
         Order Placed Successfully!