From bd38b4e670b74f4c5ce081694c771dcf0f6ce23e Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Fri, 21 Jun 2024 22:36:22 +0300 Subject: [PATCH 01/38] added embla carousal --- package.json | 3 + src/pages/shop/sections/Banner/Carousal.jsx | 82 +++++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 src/pages/shop/sections/Banner/Carousal.jsx diff --git a/package.json b/package.json index 1743a34b..633df16d 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,9 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "date-fns": "^2.30.0", + "embla-carousel": "^8.1.5", + "embla-carousel-autoplay": "^8.1.5", + "embla-carousel-react": "^8.1.5", "html-react-parser": "^5.0.6", "lucide-react": "^0.395.0", "million": "^3.0.2", diff --git a/src/pages/shop/sections/Banner/Carousal.jsx b/src/pages/shop/sections/Banner/Carousal.jsx new file mode 100644 index 00000000..6f9e7521 --- /dev/null +++ b/src/pages/shop/sections/Banner/Carousal.jsx @@ -0,0 +1,82 @@ +import { useState, useCallback, useEffect } from "react"; +import banner from "../../../../assets/images/shop-page/shop-banner.jpg"; +import Autoplay from "embla-carousel-autoplay"; +import useEmblaCarousel from "embla-carousel-react"; +import "./banner.css"; + +const DotButton = ({ selected, onClick }) => ( + +
+ {scrollSnaps.map((_, index) => ( + scrollTo(index)} + /> + ))} +
+ + + ); +} From 39afc70ade3d57a73d8f46519487dc6ec2abe371 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Fri, 21 Jun 2024 22:36:36 +0300 Subject: [PATCH 02/38] banner styles --- src/pages/shop/sections/Banner/banner.css | 48 +++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/pages/shop/sections/Banner/banner.css diff --git a/src/pages/shop/sections/Banner/banner.css b/src/pages/shop/sections/Banner/banner.css new file mode 100644 index 00000000..4aa5f7b3 --- /dev/null +++ b/src/pages/shop/sections/Banner/banner.css @@ -0,0 +1,48 @@ +.embla { + position: relative; +} + +.embla__viewport { + overflow: hidden; + width: 100%; +} + +.embla__viewport.is-draggable { + cursor: move; + cursor: grab; +} + +.embla__viewport.is-dragging { + cursor: grabbing; +} + +.embla__container { + display: flex; + user-select: none; + -webkit-touch-callout: none; + -khtml-user-select: none; + -webkit-tap-highlight-color: transparent; + margin-left: -10px; +} + +.embla__slide { + position: relative; + min-width: 100%; + padding-left: 10px; +} + +.embla__dot { + cursor: pointer; + position: relative; + padding: 0; + outline: 0; + border: 0; +} + +.embla__dot:after { + background-color: #efefef; + width: 100%; + height: 4px; + border-radius: 2px; + content: ""; +} From a9539a014ad26cce95abdbd0a6ad82937d705638 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Fri, 21 Jun 2024 22:36:55 +0300 Subject: [PATCH 03/38] added banner --- src/pages/shop/Homepage.jsx | 10 ++++----- src/pages/shop/sections/Banner.jsx | 26 ------------------------ src/pages/shop/sections/Banner/index.jsx | 13 ++++++++++++ 3 files changed, 18 insertions(+), 31 deletions(-) delete mode 100644 src/pages/shop/sections/Banner.jsx create mode 100644 src/pages/shop/sections/Banner/index.jsx diff --git a/src/pages/shop/Homepage.jsx b/src/pages/shop/Homepage.jsx index 54724647..f19e077f 100644 --- a/src/pages/shop/Homepage.jsx +++ b/src/pages/shop/Homepage.jsx @@ -1,5 +1,5 @@ import SeoMetadata from "../../components/SeoMetadata"; -import Banner from "./sections/Banner"; +import Banner from "./sections/Banner/index"; import CategoriesSection from "./sections/CategoriesSection"; import PopularItemsSection from "./sections/PopularItemsSection"; // import CategoriesProducts from "./sections/CategoriesProducts"; @@ -16,11 +16,11 @@ function Homepage() { ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background." siteName="SpaceYaTech Shop" /> -
+
- - {/* */} - + {/* */} + {/* */} + {/* */}
); diff --git a/src/pages/shop/sections/Banner.jsx b/src/pages/shop/sections/Banner.jsx deleted file mode 100644 index 1b6abdc0..00000000 --- a/src/pages/shop/sections/Banner.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import banner from "../../../assets/images/shop-page/shop-banner.jpg"; - -function Banner() { - return ( -
-
-

- Elevate your style with our exclusive collection of -
merchandise. -

- - -
-
- ); -} - -export default Banner; diff --git a/src/pages/shop/sections/Banner/index.jsx b/src/pages/shop/sections/Banner/index.jsx new file mode 100644 index 00000000..6468fc69 --- /dev/null +++ b/src/pages/shop/sections/Banner/index.jsx @@ -0,0 +1,13 @@ +import EmblaCarousel from "./Carousal"; + +function Banner() { + return ( +
+
+ +
+
+ ); +} + +export default Banner; From 8b98e20c6f02a1ae893574b7e9acf870c7ad4c63 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sat, 22 Jun 2024 10:51:17 +0300 Subject: [PATCH 04/38] lazy load img --- src/pages/shop/sections/Banner/Carousal.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/shop/sections/Banner/Carousal.jsx b/src/pages/shop/sections/Banner/Carousal.jsx index 6f9e7521..2bfbb0ab 100644 --- a/src/pages/shop/sections/Banner/Carousal.jsx +++ b/src/pages/shop/sections/Banner/Carousal.jsx @@ -3,6 +3,7 @@ import banner from "../../../../assets/images/shop-page/shop-banner.jpg"; import Autoplay from "embla-carousel-autoplay"; import useEmblaCarousel from "embla-carousel-react"; import "./banner.css"; +import { LazyLoadImage } from "react-lazy-load-image-component"; const DotButton = ({ selected, onClick }) => (
))} diff --git a/src/pages/landingPage/sections/FaqSection.jsx b/src/pages/landingPage/sections/FaqSection.jsx index 0384733b..24720ae9 100644 --- a/src/pages/landingPage/sections/FaqSection.jsx +++ b/src/pages/landingPage/sections/FaqSection.jsx @@ -1,6 +1,7 @@ import React from "react"; import { FAQ } from "../../../components"; +import { questions } from "../data"; function FaqSection() { return ( @@ -17,7 +18,7 @@ function FaqSection() {

- + ); } diff --git a/src/pages/shop/data.js b/src/pages/shop/data.js new file mode 100644 index 00000000..39db2e66 --- /dev/null +++ b/src/pages/shop/data.js @@ -0,0 +1,20 @@ +export const questions = [ + { + id: 1, + question: "Is SpaceYaTech free?", + answer: + "Yes, SpaceYaTech is totally free for anyone who wishes to learn technology and contribute to Open Source", + }, + { + id: 2, + question: "Does SpaceYaTech only mentor developers?", + answer: + "No, SpaceYaTech mentors anyone who is involved in modern technology. This includes developers, designers, product managers, and more. SpaceYaTech believes that everyone has the potential to learn and grow in the tech industry, and they are committed to providing mentorship to anyone who wants it.", + }, + { + id: 3, + question: "Does SpaceYaTech pay mentors?", + answer: + "No, SpaceYaTech does not pay mentors. However, mentors do receive a number of benefits.", + }, +]; diff --git a/src/pages/shop/sections/FaqSection.jsx b/src/pages/shop/sections/FaqSection.jsx new file mode 100644 index 00000000..f399de08 --- /dev/null +++ b/src/pages/shop/sections/FaqSection.jsx @@ -0,0 +1,29 @@ +import { FAQ } from "@/components"; +import { questions } from "../data"; + +const FaqSection = () => { + return ( +
+ +

+ Frequently Asked Questions +

+ +
+ ); +}; + +const FaqSeperator = () => { + return ( +
+
+
+

+ Faq +

+
+
+
+ ); +}; +export default FaqSection; From 061a84df7d0cfd7a67355356d605d7bb21940641 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sat, 22 Jun 2024 15:11:10 +0300 Subject: [PATCH 06/38] carticon --- src/components/shop/CartIcon.jsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/components/shop/CartIcon.jsx diff --git a/src/components/shop/CartIcon.jsx b/src/components/shop/CartIcon.jsx new file mode 100644 index 00000000..ea71a484 --- /dev/null +++ b/src/components/shop/CartIcon.jsx @@ -0,0 +1,14 @@ +import { MdAddShoppingCart } from "react-icons/md"; + +const CartIcon = () => { + return ( +
+
+
+ +
+
+
+ ); +}; +export default CartIcon; From 9e7a411a91fa36735c8dfca0fc6d1be6c3562102 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sat, 22 Jun 2024 15:11:28 +0300 Subject: [PATCH 07/38] search design --- src/components/shop/SearchInput.jsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/components/shop/SearchInput.jsx diff --git a/src/components/shop/SearchInput.jsx b/src/components/shop/SearchInput.jsx new file mode 100644 index 00000000..b564c8bd --- /dev/null +++ b/src/components/shop/SearchInput.jsx @@ -0,0 +1,26 @@ +import { useState } from "react"; +import { IoMdSearch } from "react-icons/io"; + +const SearchInput = () => { + const [searchText, setSearchText] = useState(""); + return ( +
+ setSearchText(e.target.value)} + /> + + + + ); +}; +export default SearchInput; From 77850837ed1e44bd133de1be95a8824839642412 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sat, 22 Jun 2024 15:11:37 +0300 Subject: [PATCH 08/38] sort design --- src/components/shop/SortItems.jsx | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/components/shop/SortItems.jsx diff --git a/src/components/shop/SortItems.jsx b/src/components/shop/SortItems.jsx new file mode 100644 index 00000000..b5902102 --- /dev/null +++ b/src/components/shop/SortItems.jsx @@ -0,0 +1,31 @@ +import { IoFilter } from "react-icons/io5"; +import { Menu } from "@headlessui/react"; + +const SortItems = () => { + return ( +
+ + + +

Sort

+ + + +
+

Lowest price first

+
+ + +
+

Highest price first

+
+ + + +
+ ); +}; +export default SortItems; From 09b84d173a612da8174cb3be3fe1a0d43338f57b Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sat, 22 Jun 2024 15:12:01 +0300 Subject: [PATCH 09/38] filter section design --- src/pages/shop/sections/FilterSection.jsx | 35 +++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/pages/shop/sections/FilterSection.jsx diff --git a/src/pages/shop/sections/FilterSection.jsx b/src/pages/shop/sections/FilterSection.jsx new file mode 100644 index 00000000..c91c9b7d --- /dev/null +++ b/src/pages/shop/sections/FilterSection.jsx @@ -0,0 +1,35 @@ +import SearchInput from "@/components/shop/SearchInput"; +import SortItems from "@/components/shop/SortItems"; + +const FilterSection = () => { + return ( +
+ +
+ + +
+
+ ); +}; + +const Categories = () => { + return ( +
+ + + + +
+ ); +}; + +const CategoryItem = ({ name }) => { + return ( + + ); +}; + +export default FilterSection; From 9b044134e89fd5a957ca982842dbd2161b20dea6 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sat, 22 Jun 2024 16:52:53 +0300 Subject: [PATCH 10/38] fixed mobile responsiveness --- src/components/shop/CartIcon.jsx | 4 +-- src/components/shop/SearchInput.jsx | 2 +- src/pages/shop/sections/Banner/Carousal.jsx | 4 +-- src/pages/shop/sections/Banner/index.jsx | 2 +- src/pages/shop/sections/FilterSection.jsx | 38 ++++++++++++++++++--- 5 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/components/shop/CartIcon.jsx b/src/components/shop/CartIcon.jsx index ea71a484..e1a37442 100644 --- a/src/components/shop/CartIcon.jsx +++ b/src/components/shop/CartIcon.jsx @@ -2,8 +2,8 @@ import { MdAddShoppingCart } from "react-icons/md"; const CartIcon = () => { return ( -
-
+
+
diff --git a/src/components/shop/SearchInput.jsx b/src/components/shop/SearchInput.jsx index b564c8bd..a1cb6f7c 100644 --- a/src/components/shop/SearchInput.jsx +++ b/src/components/shop/SearchInput.jsx @@ -15,7 +15,7 @@ const SearchInput = () => {
-

+

SpaceYaTech Hoodies

-

+

Buy out most stylish tech themed items

From KES 2,600

diff --git a/src/pages/shop/sections/Banner/index.jsx b/src/pages/shop/sections/Banner/index.jsx index 6468fc69..7fa6b797 100644 --- a/src/pages/shop/sections/Banner/index.jsx +++ b/src/pages/shop/sections/Banner/index.jsx @@ -2,7 +2,7 @@ import EmblaCarousel from "./Carousal"; function Banner() { return ( -
+
diff --git a/src/pages/shop/sections/FilterSection.jsx b/src/pages/shop/sections/FilterSection.jsx index c91c9b7d..99f383ef 100644 --- a/src/pages/shop/sections/FilterSection.jsx +++ b/src/pages/shop/sections/FilterSection.jsx @@ -1,11 +1,14 @@ import SearchInput from "@/components/shop/SearchInput"; import SortItems from "@/components/shop/SortItems"; +import { Menu } from "@headlessui/react"; +import { IoMenu } from "react-icons/io5"; const FilterSection = () => { return (
-
+
+
@@ -15,7 +18,7 @@ const FilterSection = () => { const Categories = () => { return ( -
+
@@ -26,10 +29,37 @@ const Categories = () => { const CategoryItem = ({ name }) => { return ( - ); }; +const MobileCategories = () => { + return ( +
+ + + +

Categories

+ + + + + + + + + + + + + +
+ ); +}; + export default FilterSection; From 1d620b4a7a945e05f1d6a6327c152a8644d1a30f Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sat, 22 Jun 2024 17:18:19 +0300 Subject: [PATCH 11/38] section wrapper --- src/components/shop/CartIcon.jsx | 13 +++++---- src/components/shop/SectionWrapper.jsx | 4 +++ src/pages/shop/Homepage.jsx | 12 ++++++--- src/pages/shop/sections/Banner/index.jsx | 13 +++++---- src/pages/shop/sections/FaqSection.jsx | 33 +++++++++-------------- src/pages/shop/sections/FilterSection.jsx | 17 +++++++----- 6 files changed, 51 insertions(+), 41 deletions(-) create mode 100644 src/components/shop/SectionWrapper.jsx diff --git a/src/components/shop/CartIcon.jsx b/src/components/shop/CartIcon.jsx index e1a37442..5129412b 100644 --- a/src/components/shop/CartIcon.jsx +++ b/src/components/shop/CartIcon.jsx @@ -1,14 +1,17 @@ import { MdAddShoppingCart } from "react-icons/md"; +import SectionWrapper from "./SectionWrapper"; const CartIcon = () => { return ( -
-
-
- + +
+
+
+ +
-
+ ); }; export default CartIcon; diff --git a/src/components/shop/SectionWrapper.jsx b/src/components/shop/SectionWrapper.jsx new file mode 100644 index 00000000..7055c3aa --- /dev/null +++ b/src/components/shop/SectionWrapper.jsx @@ -0,0 +1,4 @@ +const SectionWrapper = ({ children }) => { + return
{children}
; +}; +export default SectionWrapper; diff --git a/src/pages/shop/Homepage.jsx b/src/pages/shop/Homepage.jsx index f19e077f..a6496528 100644 --- a/src/pages/shop/Homepage.jsx +++ b/src/pages/shop/Homepage.jsx @@ -1,8 +1,11 @@ +import CartIcon from "@/components/shop/CartIcon"; import SeoMetadata from "../../components/SeoMetadata"; import Banner from "./sections/Banner/index"; import CategoriesSection from "./sections/CategoriesSection"; import PopularItemsSection from "./sections/PopularItemsSection"; -// import CategoriesProducts from "./sections/CategoriesProducts"; +import FilterSection from "./sections/FilterSection"; +import FaqSection from "./sections/FaqSection"; +import CategoriesProducts from "./sections/CategoriesProducts"; function Homepage() { return ( @@ -16,10 +19,13 @@ function Homepage() { ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background." siteName="SpaceYaTech Shop" /> -
+
+ + + + {/* */} - {/* */} {/* */}
diff --git a/src/pages/shop/sections/Banner/index.jsx b/src/pages/shop/sections/Banner/index.jsx index 7fa6b797..8c7b1184 100644 --- a/src/pages/shop/sections/Banner/index.jsx +++ b/src/pages/shop/sections/Banner/index.jsx @@ -1,12 +1,15 @@ +import SectionWrapper from "@/components/shop/SectionWrapper"; import EmblaCarousel from "./Carousal"; function Banner() { return ( -
-
- -
-
+ +
+
+ +
+
+ ); } diff --git a/src/pages/shop/sections/FaqSection.jsx b/src/pages/shop/sections/FaqSection.jsx index f399de08..a6a24f6e 100644 --- a/src/pages/shop/sections/FaqSection.jsx +++ b/src/pages/shop/sections/FaqSection.jsx @@ -1,29 +1,20 @@ -import { FAQ } from "@/components"; +import { FAQ, LandingWrapper } from "@/components"; import { questions } from "../data"; +import SectionWrapper from "@/components/shop/SectionWrapper"; const FaqSection = () => { return ( -
- -

- Frequently Asked Questions -

- -
+ + +
+

+ Frequently Asked Questions +

+ +
+ + ); }; -const FaqSeperator = () => { - return ( -
-
-
-

- Faq -

-
-
-
- ); -}; export default FaqSection; diff --git a/src/pages/shop/sections/FilterSection.jsx b/src/pages/shop/sections/FilterSection.jsx index 99f383ef..212b75ee 100644 --- a/src/pages/shop/sections/FilterSection.jsx +++ b/src/pages/shop/sections/FilterSection.jsx @@ -1,18 +1,21 @@ import SearchInput from "@/components/shop/SearchInput"; +import SectionWrapper from "@/components/shop/SectionWrapper"; import SortItems from "@/components/shop/SortItems"; import { Menu } from "@headlessui/react"; import { IoMenu } from "react-icons/io5"; const FilterSection = () => { return ( -
- -
- - - + +
+ +
+ + + +
-
+ ); }; From 25523c1116942a17add5aee6217958a4d504dea5 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sun, 23 Jun 2024 11:42:35 +0300 Subject: [PATCH 12/38] updated category filter --- src/pages/shop/data.js | 8 +++++ src/pages/shop/sections/FilterSection.jsx | 39 +++++++++++++---------- 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/pages/shop/data.js b/src/pages/shop/data.js index 39db2e66..a439d203 100644 --- a/src/pages/shop/data.js +++ b/src/pages/shop/data.js @@ -18,3 +18,11 @@ export const questions = [ "No, SpaceYaTech does not pay mentors. However, mentors do receive a number of benefits.", }, ]; + +export const categories = [ + "hoodies", + "T-shirts", + "cups", + "bookmarks", + "jackets", +]; diff --git a/src/pages/shop/sections/FilterSection.jsx b/src/pages/shop/sections/FilterSection.jsx index 212b75ee..49cc7d3f 100644 --- a/src/pages/shop/sections/FilterSection.jsx +++ b/src/pages/shop/sections/FilterSection.jsx @@ -3,6 +3,8 @@ import SectionWrapper from "@/components/shop/SectionWrapper"; import SortItems from "@/components/shop/SortItems"; import { Menu } from "@headlessui/react"; import { IoMenu } from "react-icons/io5"; +import { Link, useParams } from "react-router-dom"; +import { categories } from "../data"; const FilterSection = () => { return ( @@ -22,19 +24,28 @@ const FilterSection = () => { const Categories = () => { return (
- - - - + {categories.map((item, i) => ( + + ))}
); }; const CategoryItem = ({ name }) => { + const params = useParams(); + const category = params.category === name; + return ( - + +

+ {name} +

+ ); }; @@ -50,15 +61,11 @@ const MobileCategories = () => { anchor="bottom" className="absolute md:static top-10 z-10 right-0 w-48 py-1 px-2 bg-white rounded-md flex flex-col md:flex-row gap-2 border shadow-sm" > - - - - - - - - - + {categories.map((item, i) => ( + + + + ))}
From 8144fd4805af166287dde9d2bb17a5049a596794 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sun, 23 Jun 2024 12:17:08 +0300 Subject: [PATCH 13/38] sort functionality --- src/components/shop/SortItems.jsx | 18 +++++++--- .../shop/sections/CategoriesProducts.jsx | 36 ++++++++++++------- 2 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/components/shop/SortItems.jsx b/src/components/shop/SortItems.jsx index b5902102..2fd7b8d6 100644 --- a/src/components/shop/SortItems.jsx +++ b/src/components/shop/SortItems.jsx @@ -1,7 +1,11 @@ import { IoFilter } from "react-icons/io5"; import { Menu } from "@headlessui/react"; +import { Link, useLocation } from "react-router-dom"; const SortItems = () => { + const { pathname } = useLocation(); + const path = pathname.includes("category") ? pathname : "/shop/items"; + return (
@@ -14,14 +18,20 @@ const SortItems = () => { className="absolute top-10 z-10 right-0 w-48 bg-white py-2 px-4 rounded-md flex flex-col gap-2 border shadow-sm" > -
+

Lowest price first

-
+ -
+

Highest price first

-
+ diff --git a/src/pages/shop/sections/CategoriesProducts.jsx b/src/pages/shop/sections/CategoriesProducts.jsx index 067e88f1..7102591c 100644 --- a/src/pages/shop/sections/CategoriesProducts.jsx +++ b/src/pages/shop/sections/CategoriesProducts.jsx @@ -1,11 +1,16 @@ import { useEffect, useState } from "react"; -import { useParams, Link } from "react-router-dom"; +import { useParams, Link, useSearchParams } from "react-router-dom"; import { useSwagList } from "../../../hooks/Queries/shop/useSwagList"; import ItemHeader from "./ItemHeader"; import { LazyLoadImage } from "react-lazy-load-image-component"; +import FilterSection from "./FilterSection"; +import SectionWrapper from "@/components/shop/SectionWrapper"; function CategoriesProducts() { const params = useParams(); + const [searchParams] = useSearchParams(); + const sort = searchParams.get("sort"); + const [products, setProducts] = useState([ { id: 1, @@ -77,22 +82,27 @@ function CategoriesProducts() { const { data: swagList, isSuccess } = useSwagList(); useEffect(() => { - setProducts( + const data = swagList?.filter( (item) => item.category.toLowerCase() === params?.category.toLowerCase() - ) || [] - ); - }, [swagList, params]); + ) || []; + if (sort === "low") { + setProducts(data.sort((a, b) => +a.price - +b.price)); + } else if (sort === "high") { + setProducts(data.sort((a, b) => +b.price - +a.price)); + } else { + setProducts(data); + } + }, [swagList, params, sort]); return ( <> - setOpen((prev) => !prev)} /> +
+ setOpen((prev) => !prev)} /> + +
-
-

- {params?.category} -

- +
{isSuccess && products.map((product) => ( @@ -102,7 +112,7 @@ function CategoriesProducts() { to={`/shop/item/${product.id}`} >
- ))}
-
+
); From 4e7bc0617e1e4d2c53d833ef037ec974482e6843 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sun, 23 Jun 2024 13:19:52 +0300 Subject: [PATCH 14/38] updated search --- src/components/shop/SearchInput.jsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/shop/SearchInput.jsx b/src/components/shop/SearchInput.jsx index a1cb6f7c..95ce82de 100644 --- a/src/components/shop/SearchInput.jsx +++ b/src/components/shop/SearchInput.jsx @@ -1,10 +1,21 @@ import { useState } from "react"; import { IoMdSearch } from "react-icons/io"; +import { useNavigate } from "react-router-dom"; const SearchInput = () => { const [searchText, setSearchText] = useState(""); + const navigate = useNavigate(); + + function handleSubmit(e) { + e.preventDefault(); + navigate(`/shop/items?search=${searchText}`); + } + return ( -
+ { From a3afe236ba7f01d3d7f17c1196f0ab60e8d51b8a Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sun, 23 Jun 2024 13:20:18 +0300 Subject: [PATCH 15/38] added items page --- src/index.js | 74 ++++++++++++------- src/pages/shop/sections/AllProducts.jsx | 80 +++++++++++++++++++++ src/pages/shop/sections/Banner/Carousal.jsx | 8 ++- src/router/index.jsx | 9 +++ 4 files changed, 145 insertions(+), 26 deletions(-) create mode 100644 src/pages/shop/sections/AllProducts.jsx diff --git a/src/index.js b/src/index.js index 9521f5be..be68e4fb 100644 --- a/src/index.js +++ b/src/index.js @@ -5,16 +5,16 @@ import { lazy } from "react"; const AboutUs = lazy(() => import("./pages/aboutUs/AboutUs")); const AdminLayout = lazy(() => import("./components/admin/AdminLayout")); const AllBlogsPage = lazy(() => import("./pages/admin/blogs/AllBlogsPage")); -const AddChapterPage = lazy(() => - import("./pages/admin/chapters/AddChapterPage") +const AddChapterPage = lazy( + () => import("./pages/admin/chapters/AddChapterPage") ); -const AllChaptersPage = lazy(() => - import("./pages/admin/chapters/AllChaptersPage") +const AllChaptersPage = lazy( + () => import("./pages/admin/chapters/AllChaptersPage") ); const AddEventPage = lazy(() => import("./pages/admin/events/AddEventPage")); const AllEventsPage = lazy(() => import("./pages/admin/events/AllEventsPage")); -const UpdateEventPage = lazy(() => - import("./pages/admin/events/UpdateEventPage") +const UpdateEventPage = lazy( + () => import("./pages/admin/events/UpdateEventPage") ); const ForgotPassword = lazy(() => import("./pages/auth/ForgotPassword")); const LogIn = lazy(() => import("./pages/auth/LogIn")); @@ -23,16 +23,17 @@ const SignUp = lazy(() => import("./pages/auth/SignUp")); const Blog = lazy(() => import("./pages/blog/Blog")); const Blog2 = lazy(() => import("./pages/blog2/Blog2")); const Blogs = lazy(() => import("./pages/blogs/Blogs")); -const IndividualChapter = lazy(() => - import("./pages/chapter/pages/IndividualChapter") +const IndividualChapter = lazy( + () => import("./pages/chapter/pages/IndividualChapter") ); const CommunityPage = lazy(() => import("./pages/community/CommunityPage")); -const SingleEvent = lazy(() => - import("./pages/community/sections/eventsPreview/SingleEvents/SingleEvent") +const SingleEvent = lazy( + () => + import("./pages/community/sections/eventsPreview/SingleEvents/SingleEvent") ); const DonatePage = lazy(() => import("./pages/donate/DonatePage")); -const SingleProductDonation = lazy(() => - import("./pages/donate/pages/SingleProductDonatePage") +const SingleProductDonation = lazy( + () => import("./pages/donate/pages/SingleProductDonatePage") ); const Error400 = lazy(() => import("./pages/errorPages/Error400")); const Error403 = lazy(() => import("./pages/errorPages/Error403")); @@ -40,8 +41,8 @@ const Error404 = lazy(() => import("./pages/errorPages/Error404")); const Error500 = lazy(() => import("./pages/errorPages/Error500")); const ErrorBoundary = lazy(() => import("./pages/errorPages/ErrorBoundary")); const EventsPage = lazy(() => import("./pages/events/pages/EventsPage")); -const EventsSection = lazy(() => - import("./pages/events/sections/eventsSection/EventsSection") +const EventsSection = lazy( + () => import("./pages/events/sections/eventsSection/EventsSection") ); const GalleryPage = lazy(() => import("./pages/gallery/GalleryPage")); const LandingPage = lazy(() => import("./pages/landingPage/LandingPage")); @@ -51,27 +52,52 @@ const Resources = lazy(() => import("./pages/resources/Resources")); const Homepage = lazy(() => import("./pages/shop/Homepage")); const Checkout = lazy(() => import("./pages/shop/OrderSummaryPage")); const ProductDisplay = lazy(() => import("./pages/shop/ProductDisplayPage")); -const CategoriesProducts = lazy(() => - import("./pages/shop/sections/CategoriesProducts") +const CategoriesProducts = lazy( + () => import("./pages/shop/sections/CategoriesProducts") ); +const AllProducts = lazy(() => import("./pages/shop/sections/AllProducts")); const SingleItemPage = lazy(() => import("./pages/shop/SingleItemPage")); const ShopDashboard = lazy(() => import("./pages/admin/shop/ShopDashboard")); export { - AboutUs, AddChapterPage, + AllProducts, + AboutUs, + AddChapterPage, AddEventPage, AdminLayout, AllBlogsPage, AllChaptersPage, - AllEventsPage, Blog, - Blog2, Blogs, CategoriesProducts, Checkout, CommunityPage, - DonatePage, Error400, + AllEventsPage, + Blog, + Blog2, + Blogs, + CategoriesProducts, + Checkout, + CommunityPage, + DonatePage, + Error400, Error403, Error404, Error500, - ErrorBoundary, EventsPage, - EventsSection, ForgotPassword, GalleryPage, Homepage, IndividualChapter, LandingPage, Layout, LogIn, ProductDisplay, Products, ResetPassword, Resources, ShopDashboard, - SignUp, SingleEvent, SingleItemPage, SingleProductDonation, UpdateEventPage + ErrorBoundary, + EventsPage, + EventsSection, + ForgotPassword, + GalleryPage, + Homepage, + IndividualChapter, + LandingPage, + Layout, + LogIn, + ProductDisplay, + Products, + ResetPassword, + Resources, + ShopDashboard, + SignUp, + SingleEvent, + SingleItemPage, + SingleProductDonation, + UpdateEventPage, }; - diff --git a/src/pages/shop/sections/AllProducts.jsx b/src/pages/shop/sections/AllProducts.jsx new file mode 100644 index 00000000..2147ffd0 --- /dev/null +++ b/src/pages/shop/sections/AllProducts.jsx @@ -0,0 +1,80 @@ +import { useEffect, useState } from "react"; +import { Link, useSearchParams } from "react-router-dom"; +import { useSwagList } from "../../../hooks/Queries/shop/useSwagList"; +import { LazyLoadImage } from "react-lazy-load-image-component"; +import SectionWrapper from "@/components/shop/SectionWrapper"; +import CartIcon from "@/components/shop/CartIcon"; +import FilterSection from "./FilterSection"; + +function AllProducts() { + const [products, setProducts] = useState([]); + const { data: swagList, isSuccess } = useSwagList(); + const [searchParams] = useSearchParams(); + const sort = searchParams.get("sort"); + const searchText = searchParams.get("search"); + + const sortedSwag = + sort === "low" + ? swagList?.sort((a, b) => +a.price - +b.price) + : swagList?.sort((a, b) => +b.price - +a.price); + const searchSwag = + searchText === "" + ? swagList + : swagList?.filter((item) => + item.name + .toLowerCase() + .replace(/\s+/g, "") + .includes(searchText?.toLowerCase().replace(/\s+/g, "")) + ); + + useEffect(() => { + if (sort) { + setProducts(sortedSwag); + } else if (searchText) { + setProducts(searchSwag); + } else { + setProducts(swagList); + } + }, [swagList, searchText, sort]); + + return ( + <> +
+ + +
+ +
+ {isSuccess && + products.map((product) => ( + +
+ +
+
+
+

+ {product.name} +

+

+ {product.price} +

+
+
+ + ))} +
+ + + ); +} + +export default AllProducts; diff --git a/src/pages/shop/sections/Banner/Carousal.jsx b/src/pages/shop/sections/Banner/Carousal.jsx index 01d62791..dd06086d 100644 --- a/src/pages/shop/sections/Banner/Carousal.jsx +++ b/src/pages/shop/sections/Banner/Carousal.jsx @@ -4,6 +4,7 @@ import Autoplay from "embla-carousel-autoplay"; import useEmblaCarousel from "embla-carousel-react"; import "./banner.css"; import { LazyLoadImage } from "react-lazy-load-image-component"; +import { Link } from "react-router-dom"; const DotButton = ({ selected, onClick }) => ( +
{scrollSnaps.map((_, index) => ( ), }, + { + path: "/shop/items", + element: ( + }> + + + ), + }, { path: "/shop/category/:category", element: ( From a4ad36b274b81b72589a9759f6d07bb7dff638c2 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sun, 23 Jun 2024 13:27:00 +0300 Subject: [PATCH 16/38] updated itemheader --- src/pages/shop/sections/ItemHeader.jsx | 101 +++++++++++++------------ 1 file changed, 52 insertions(+), 49 deletions(-) diff --git a/src/pages/shop/sections/ItemHeader.jsx b/src/pages/shop/sections/ItemHeader.jsx index 6b0101cd..c8668a88 100644 --- a/src/pages/shop/sections/ItemHeader.jsx +++ b/src/pages/shop/sections/ItemHeader.jsx @@ -1,10 +1,12 @@ -import { FaCheck } from "react-icons/fa"; -import { FaMagnifyingGlass } from "react-icons/fa6"; -import { PiShoppingCartLight } from "react-icons/pi"; -import { Combobox, Transition } from "@headlessui/react"; -import { Fragment, useState } from "react"; +// import { FaCheck } from "react-icons/fa"; +// import { FaMagnifyingGlass } from "react-icons/fa6"; +// import { PiShoppingCartLight } from "react-icons/pi"; +// import { Combobox, Transition } from "@headlessui/react"; +// import { Fragment, useState } from "react"; +// import { useSwagList } from "../../../hooks/Queries/shop/useSwagList"; import { useLocation, useParams, Link } from "react-router-dom"; -import { useSwagList } from "../../../hooks/Queries/shop/useSwagList"; +import CartIcon from "@/components/shop/CartIcon"; +import SectionWrapper from "@/components/shop/SectionWrapper"; function ItemHeader({ show }) { const { pathname } = useLocation(); @@ -14,57 +16,58 @@ function ItemHeader({ show }) { .split("/") .filter((path) => path && path !== "category" && path !== id); - const { data: swag, isSuccess } = useSwagList(); + // const { data: swag, isSuccess } = useSwagList(); - const [selected, setSelected] = useState(isSuccess && swag[0]); - const [query, setQuery] = useState(""); + // const [selected, setSelected] = useState(isSuccess && swag[0]); + // const [query, setQuery] = useState(""); - const filteredSwag = - query === "" - ? swag - : swag.filter((item) => - item.name - .toLowerCase() - .replace(/\s+/g, "") - .includes(query.toLowerCase().replace(/\s+/g, "")) - ); + // const filteredSwag = + // query === "" + // ? swag + // : swag.filter((item) => + // item.name + // .toLowerCase() + // .replace(/\s+/g, "") + // .includes(query.toLowerCase().replace(/\s+/g, "")) + // ); return ( -
- {/* Breadcrumb */} - + + + {/* Search box */} -
+ {/*
{pathname === "/shop" && (
@@ -147,7 +150,7 @@ function ItemHeader({ show }) { -
+
*/}
); } From f79544cf361c983f44acc86dda14aa11f6ac6963 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Sun, 23 Jun 2024 13:28:36 +0300 Subject: [PATCH 17/38] shoplink update --- src/components/Header.jsx | 10 ++-- .../shop/sections/CategoriesProducts.jsx | 60 +++++++++---------- 2 files changed, 34 insertions(+), 36 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 169a1b68..4b91abe7 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -37,11 +37,11 @@ const navLinks = [ link: "Resources", route: "/resources", }, - // { - // id: 7, - // link: "Shop", - // route: "/shop", - // }, + { + id: 7, + link: "Shop", + route: "/shop", + }, // { // id: 8, // link: "Donate", diff --git a/src/pages/shop/sections/CategoriesProducts.jsx b/src/pages/shop/sections/CategoriesProducts.jsx index 7102591c..8841cd82 100644 --- a/src/pages/shop/sections/CategoriesProducts.jsx +++ b/src/pages/shop/sections/CategoriesProducts.jsx @@ -101,38 +101,36 @@ function CategoriesProducts() { setOpen((prev) => !prev)} />
-
- -
- {isSuccess && - products.map((product) => ( - -
- + +
+ {isSuccess && + products.map((product) => ( + +
+ +
+
+
+

+ {product.name} +

+

+ {product.price} +

-
-
-

- {product.name} -

-

- {product.price} -

-
-
- - ))} -
- -
+
+ + ))} +
+ ); } From 47c1e6bcfd33d3c77e7b2635d04b36ce379ac7da Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Mon, 24 Jun 2024 12:59:01 +0300 Subject: [PATCH 18/38] featured products design --- src/pages/shop/Homepage.jsx | 4 +- src/pages/shop/sections/Banner/banner.css | 15 ++++ src/pages/shop/sections/FeaturedProducts.jsx | 89 ++++++++++++++++++++ 3 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 src/pages/shop/sections/FeaturedProducts.jsx diff --git a/src/pages/shop/Homepage.jsx b/src/pages/shop/Homepage.jsx index a6496528..fbbab06d 100644 --- a/src/pages/shop/Homepage.jsx +++ b/src/pages/shop/Homepage.jsx @@ -6,6 +6,8 @@ import PopularItemsSection from "./sections/PopularItemsSection"; import FilterSection from "./sections/FilterSection"; import FaqSection from "./sections/FaqSection"; import CategoriesProducts from "./sections/CategoriesProducts"; +import AllProducts from "./sections/AllProducts"; +import FeaturedProducts from "./sections/FeaturedProducts"; function Homepage() { return ( @@ -23,7 +25,7 @@ function Homepage() { - + {/* */} {/* */} diff --git a/src/pages/shop/sections/Banner/banner.css b/src/pages/shop/sections/Banner/banner.css index 4aa5f7b3..1edc6c67 100644 --- a/src/pages/shop/sections/Banner/banner.css +++ b/src/pages/shop/sections/Banner/banner.css @@ -46,3 +46,18 @@ border-radius: 2px; content: ""; } + +.embla__progress { + position: relative; + justify-self: flex-end; + align-self: center; + max-width: 90%; + overflow: hidden; +} +.embla__progress__bar { + position: absolute; + width: 100%; + top: 0; + bottom: 0; + left: -100%; +} diff --git a/src/pages/shop/sections/FeaturedProducts.jsx b/src/pages/shop/sections/FeaturedProducts.jsx new file mode 100644 index 00000000..cc87dda9 --- /dev/null +++ b/src/pages/shop/sections/FeaturedProducts.jsx @@ -0,0 +1,89 @@ +import { LandingWrapper } from "@/components"; +import SectionWrapper from "@/components/shop/SectionWrapper"; +import useEmblaCarousel from "embla-carousel-react"; +import "./Banner/banner.css"; +import { useCallback, useEffect, useState } from "react"; +import { LazyLoadImage } from "react-lazy-load-image-component"; +import { useSwagList } from "@/hooks/Queries/shop/useSwagList"; +import { Link } from "react-router-dom"; + +const FeaturedProducts = () => { + const { data: swagList, isSuccess } = useSwagList(); + const [viewportRef, embla] = useEmblaCarousel({ loop: false }); + + const [scrollProgress, setScrollProgress] = useState(0); + const onScroll = useCallback((embla) => { + const progress = Math.max(0, Math.min(1, embla.scrollProgress())); + setScrollProgress(progress * 100); + }, []); + useEffect(() => { + if (!embla) return; + + onScroll(embla); + embla + .on("reInit", onScroll) + .on("scroll", onScroll) + .on("slideFocus", onScroll); + }, [embla, onScroll]); + + return ( + + +
+

+ Our most popular products +

+
+
+
+
+ {isSuccess && + swagList?.map((product) => ( +
+ +
+ +
+
+
+

+ {product.name} +

+

+ {product.price} +

+
+
+ +
+ ))} +
+
+
+
+
+
+
+
+ + + ); +}; + +export default FeaturedProducts; From 18685e028ced2a88ac045c6c5473733e8329eae0 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Mon, 24 Jun 2024 16:31:48 +0300 Subject: [PATCH 19/38] added product card --- src/components/shop/ProductCard.jsx | 63 ++++++++++++ src/pages/shop/sections/AllProducts.jsx | 32 +----- .../shop/sections/CategoriesProducts.jsx | 97 +------------------ src/pages/shop/sections/FeaturedProducts.jsx | 29 +----- 4 files changed, 77 insertions(+), 144 deletions(-) create mode 100644 src/components/shop/ProductCard.jsx diff --git a/src/components/shop/ProductCard.jsx b/src/components/shop/ProductCard.jsx new file mode 100644 index 00000000..500a4794 --- /dev/null +++ b/src/components/shop/ProductCard.jsx @@ -0,0 +1,63 @@ +import { addCommaSeparator, categoryColors, cn } from "@/utilities/utils"; +import { CiShoppingTag } from "react-icons/ci"; +import { MdAddShoppingCart } from "react-icons/md"; +import { LazyLoadImage } from "react-lazy-load-image-component"; +import { Link } from "react-router-dom"; + +const ProductCard = ({ product }) => { + const { backgroundColor, color } = categoryColors(product.category); + + return ( +
+ + + + +

+ {product.name} +

+
+ {product.stock > 0 ? ( +

+ {product.stock} + items left +

+ ) : ( +
+

Out of stock

+
+ )} +
+ +
+
+ +

{product.category}

+
+
+
+

+ KES {addCommaSeparator(Number(product.price))} +

+
+ +

Add to cart

+
+
+
+ ); +}; +export default ProductCard; diff --git a/src/pages/shop/sections/AllProducts.jsx b/src/pages/shop/sections/AllProducts.jsx index 2147ffd0..5cf6a61a 100644 --- a/src/pages/shop/sections/AllProducts.jsx +++ b/src/pages/shop/sections/AllProducts.jsx @@ -1,10 +1,10 @@ import { useEffect, useState } from "react"; -import { Link, useSearchParams } from "react-router-dom"; +import { useSearchParams } from "react-router-dom"; import { useSwagList } from "../../../hooks/Queries/shop/useSwagList"; -import { LazyLoadImage } from "react-lazy-load-image-component"; import SectionWrapper from "@/components/shop/SectionWrapper"; import CartIcon from "@/components/shop/CartIcon"; import FilterSection from "./FilterSection"; +import ProductCard from "@/components/shop/ProductCard"; function AllProducts() { const [products, setProducts] = useState([]); @@ -44,32 +44,10 @@ function AllProducts() {
-
+
{isSuccess && - products.map((product) => ( - -
- -
-
-
-

- {product.name} -

-

- {product.price} -

-
-
- + products?.map((product) => ( + ))}
diff --git a/src/pages/shop/sections/CategoriesProducts.jsx b/src/pages/shop/sections/CategoriesProducts.jsx index 8841cd82..ab445f5a 100644 --- a/src/pages/shop/sections/CategoriesProducts.jsx +++ b/src/pages/shop/sections/CategoriesProducts.jsx @@ -1,82 +1,17 @@ import { useEffect, useState } from "react"; -import { useParams, Link, useSearchParams } from "react-router-dom"; +import { useParams, useSearchParams } from "react-router-dom"; import { useSwagList } from "../../../hooks/Queries/shop/useSwagList"; import ItemHeader from "./ItemHeader"; -import { LazyLoadImage } from "react-lazy-load-image-component"; import FilterSection from "./FilterSection"; import SectionWrapper from "@/components/shop/SectionWrapper"; +import ProductCard from "@/components/shop/ProductCard"; function CategoriesProducts() { const params = useParams(); const [searchParams] = useSearchParams(); const sort = searchParams.get("sort"); - const [products, setProducts] = useState([ - { - id: 1, - name: "Bookmarks", - href: "", - imageSrc: - "https://images.unsplash.com/photo-1588618575327-87bfc763efd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=865&q=80", - price: "Ksh 500", - }, - { - id: 2, - name: "SpaceYaTech Hoodie", - href: "#", - imageSrc: - "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=436&q=80", - price: "Ksh 500", - }, - { - id: 3, - name: "Mentorist T-shirt", - href: "#", - imageSrc: - "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=436&q=80", - price: "Ksh 500", - }, - { - id: 4, - name: "SpaceYaTech Mug", - href: "#", - imageSrc: - "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1936&q=80", - price: "Ksh 500", - }, - { - id: 5, - name: "Bookmarks", - href: "#", - imageSrc: - "https://images.unsplash.com/photo-1588618575327-87bfc763efd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=865&q=80", - price: "Ksh 500", - }, - { - id: 6, - name: "SpaceYaTech Hoodie", - href: "#", - imageSrc: - "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=436&q=80", - price: "Ksh 500", - }, - { - id: 7, - name: "Mentorist T-shirt", - href: "#", - imageSrc: - "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=436&q=80", - price: "Ksh 500", - }, - { - id: 8, - name: "SpaceYaTech Mug", - href: "#", - imageSrc: - "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1936&q=80", - price: "Ksh 500", - }, - ]); + const [products, setProducts] = useState([]); const [open, setOpen] = useState(true); const { data: swagList, isSuccess } = useSwagList(); @@ -102,32 +37,10 @@ function CategoriesProducts() {
-
+
{isSuccess && products.map((product) => ( - -
- -
-
-
-

- {product.name} -

-

- {product.price} -

-
-
- + ))}
diff --git a/src/pages/shop/sections/FeaturedProducts.jsx b/src/pages/shop/sections/FeaturedProducts.jsx index cc87dda9..ca075312 100644 --- a/src/pages/shop/sections/FeaturedProducts.jsx +++ b/src/pages/shop/sections/FeaturedProducts.jsx @@ -3,9 +3,8 @@ import SectionWrapper from "@/components/shop/SectionWrapper"; import useEmblaCarousel from "embla-carousel-react"; import "./Banner/banner.css"; import { useCallback, useEffect, useState } from "react"; -import { LazyLoadImage } from "react-lazy-load-image-component"; import { useSwagList } from "@/hooks/Queries/shop/useSwagList"; -import { Link } from "react-router-dom"; +import ProductCard from "@/components/shop/ProductCard"; const FeaturedProducts = () => { const { data: swagList, isSuccess } = useSwagList(); @@ -43,33 +42,13 @@ const FeaturedProducts = () => { {isSuccess && swagList?.map((product) => (
- -
- -
-
-
-

- {product.name} -

-

- {product.price} -

-
-
- +
))} + flex
From 9d84bdbbd2c13bbde0a729ab78a8ffdf8ee56960 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Mon, 24 Jun 2024 16:32:24 +0300 Subject: [PATCH 20/38] updated categories data --- src/pages/shop/data.js | 30 +++++++++++++++++++---- src/pages/shop/sections/FilterSection.jsx | 4 +-- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/pages/shop/data.js b/src/pages/shop/data.js index a439d203..bef46d20 100644 --- a/src/pages/shop/data.js +++ b/src/pages/shop/data.js @@ -20,9 +20,29 @@ export const questions = [ ]; export const categories = [ - "hoodies", - "T-shirts", - "cups", - "bookmarks", - "jackets", + { + name: "hoodies", + textColor: "rgb(255, 0, 102)", + bgColor: "rgb(255, 0, 102, 0.1)", + }, + { + name: "T-shirts", + textColor: "rgb(0, 102, 255)", + bgColor: "rgb(0, 102, 255, 0.1)", + }, + { + name: "cups", + textColor: "rgb(153, 0, 255)", + bgColor: "rgb(153, 0, 255, 0.1)", + }, + { + name: "bookmarks", + textColor: "rgb(51, 51, 0)", + bgColor: "rgb(51, 51, 0, 0.1)", + }, + { + name: "jackets", + textColor: "rgb(0, 0, 153)", + bgColor: "rgb(0, 0, 153, 0.1)", + }, ]; diff --git a/src/pages/shop/sections/FilterSection.jsx b/src/pages/shop/sections/FilterSection.jsx index 49cc7d3f..386f5ae3 100644 --- a/src/pages/shop/sections/FilterSection.jsx +++ b/src/pages/shop/sections/FilterSection.jsx @@ -25,7 +25,7 @@ const Categories = () => { return (
{categories.map((item, i) => ( - + ))}
); @@ -63,7 +63,7 @@ const MobileCategories = () => { > {categories.map((item, i) => ( - + ))} From 118e729be3d7d4d69c9f53de1e7f9851abb9d5c1 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Mon, 24 Jun 2024 16:33:32 +0300 Subject: [PATCH 21/38] helper fns --- src/utilities/utils.js | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/src/utilities/utils.js b/src/utilities/utils.js index 20aa6031..d0763150 100644 --- a/src/utilities/utils.js +++ b/src/utilities/utils.js @@ -1,6 +1,32 @@ -import { clsx } from "clsx" -import { twMerge } from "tailwind-merge" +import { categories } from "@/pages/shop/data"; +import { clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; export function cn(...inputs) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); +} + +export function addCommaSeparator(number) { + if (isNaN(number) || number < 1000) { + return number.toFixed(0); + } + + const numberString = number.toString(); + let result = ""; + + for (let i = numberString.length - 1, count = 0; i >= 0; i--, count++) { + if (count === 3) { + result = "," + result; + count = 0; + } + result = numberString[i] + result; + } + return result; +} + +export function categoryColors(name) { + const category = categories.find((item) => item.name === name.toLowerCase()); + return category + ? { backgroundColor: category.bgColor, color: category.textColor } + : { backgroundColor: "rgb(102, 51, 0, 0.2)", color: "rgb(102, 51, 0)" }; } From 8eb83d9d8ac1b8aa64b9b0e078dbed5e056749f8 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Mon, 24 Jun 2024 16:38:43 +0300 Subject: [PATCH 22/38] new products section --- src/pages/shop/Homepage.jsx | 2 ++ src/pages/shop/sections/NewProducts.jsx | 28 +++++++++++++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 src/pages/shop/sections/NewProducts.jsx diff --git a/src/pages/shop/Homepage.jsx b/src/pages/shop/Homepage.jsx index fbbab06d..42ec9078 100644 --- a/src/pages/shop/Homepage.jsx +++ b/src/pages/shop/Homepage.jsx @@ -8,6 +8,7 @@ import FaqSection from "./sections/FaqSection"; import CategoriesProducts from "./sections/CategoriesProducts"; import AllProducts from "./sections/AllProducts"; import FeaturedProducts from "./sections/FeaturedProducts"; +import NewProducts from "./sections/NewProducts"; function Homepage() { return ( @@ -26,6 +27,7 @@ function Homepage() { + {/* */} {/* */} diff --git a/src/pages/shop/sections/NewProducts.jsx b/src/pages/shop/sections/NewProducts.jsx new file mode 100644 index 00000000..bf8ae156 --- /dev/null +++ b/src/pages/shop/sections/NewProducts.jsx @@ -0,0 +1,28 @@ +import { LandingWrapper } from "@/components"; +import SectionWrapper from "@/components/shop/SectionWrapper"; +import { useSwagList } from "@/hooks/Queries/shop/useSwagList"; +import ProductCard from "@/components/shop/ProductCard"; + +const NewProducts = () => { + const { data: swagList, isSuccess } = useSwagList(); + + return ( + + +
+

+ Discover new products +

+
+
+ {isSuccess && + swagList?.map((product) => ( + + ))} +
+ + + ); +}; + +export default NewProducts; From 4579181e040b4958a8f3367f053f11efa931497f Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Mon, 24 Jun 2024 16:39:52 +0300 Subject: [PATCH 23/38] rm unused imprts --- src/pages/shop/Homepage.jsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/pages/shop/Homepage.jsx b/src/pages/shop/Homepage.jsx index 42ec9078..de4d8c4c 100644 --- a/src/pages/shop/Homepage.jsx +++ b/src/pages/shop/Homepage.jsx @@ -1,12 +1,8 @@ import CartIcon from "@/components/shop/CartIcon"; import SeoMetadata from "../../components/SeoMetadata"; import Banner from "./sections/Banner/index"; -import CategoriesSection from "./sections/CategoriesSection"; -import PopularItemsSection from "./sections/PopularItemsSection"; import FilterSection from "./sections/FilterSection"; import FaqSection from "./sections/FaqSection"; -import CategoriesProducts from "./sections/CategoriesProducts"; -import AllProducts from "./sections/AllProducts"; import FeaturedProducts from "./sections/FeaturedProducts"; import NewProducts from "./sections/NewProducts"; @@ -29,8 +25,6 @@ function Homepage() { - {/* */} - {/* */}
); From af0abb8040fd410b81651e485f8c0083565de60c Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Mon, 24 Jun 2024 16:40:14 +0300 Subject: [PATCH 24/38] query categoires --- src/hooks/Queries/shop/useSwagList.jsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/hooks/Queries/shop/useSwagList.jsx b/src/hooks/Queries/shop/useSwagList.jsx index e07198d3..40e250bd 100644 --- a/src/hooks/Queries/shop/useSwagList.jsx +++ b/src/hooks/Queries/shop/useSwagList.jsx @@ -38,4 +38,20 @@ const useSingleSwag = (id) => refetchOnWindowFocus: false, }); -export { useSwagList, useSingleSwag }; +const fetchCategorySwags = async (name) => { + try { + const response = await publicAxios.get(`/swaggs/?category=${name}`); + return response.data; + } catch (error) { + console.error("Error fetching category list: ", error); + throw error; + } +}; +const useCategorySwag = (name) => + useQuery({ + queryKey: ["category swag"], + queryFn: () => fetchCategorySwags(name), + refetchOnWindowFocus: false, + }); + +export { useSwagList, useSingleSwag, useCategorySwag }; From 6061197e7d928f7ab5ee87ba6532562aea35e8bb Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Tue, 25 Jun 2024 20:53:08 +0300 Subject: [PATCH 25/38] rm hover on mobile --- src/components/shop/ProductCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shop/ProductCard.jsx b/src/components/shop/ProductCard.jsx index 500a4794..821fbda2 100644 --- a/src/components/shop/ProductCard.jsx +++ b/src/components/shop/ProductCard.jsx @@ -52,7 +52,7 @@ const ProductCard = ({ product }) => {

KES {addCommaSeparator(Number(product.price))}

-
+

Add to cart

From 06fece2bd29f778631e43c282e374eb4c1095feb Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Thu, 27 Jun 2024 15:12:46 +0300 Subject: [PATCH 26/38] rm query category --- src/hooks/Queries/shop/useSwagList.jsx | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/hooks/Queries/shop/useSwagList.jsx b/src/hooks/Queries/shop/useSwagList.jsx index 40e250bd..31e258af 100644 --- a/src/hooks/Queries/shop/useSwagList.jsx +++ b/src/hooks/Queries/shop/useSwagList.jsx @@ -38,20 +38,4 @@ const useSingleSwag = (id) => refetchOnWindowFocus: false, }); -const fetchCategorySwags = async (name) => { - try { - const response = await publicAxios.get(`/swaggs/?category=${name}`); - return response.data; - } catch (error) { - console.error("Error fetching category list: ", error); - throw error; - } -}; -const useCategorySwag = (name) => - useQuery({ - queryKey: ["category swag"], - queryFn: () => fetchCategorySwags(name), - refetchOnWindowFocus: false, - }); - -export { useSwagList, useSingleSwag, useCategorySwag }; +export { useSwagList, useSingleSwag }; \ No newline at end of file From 0ce8cd1a651a2251423cb431d0be1102d4227554 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Tue, 9 Jul 2024 12:21:44 +0300 Subject: [PATCH 27/38] carticon update --- src/components/Header.jsx | 57 ++++++++++++++++++-------------- src/components/shop/CartIcon.jsx | 8 ++--- 2 files changed, 37 insertions(+), 28 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 4b91abe7..d0d5c30d 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -5,6 +5,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component"; import { Link, useLocation } from "react-router-dom"; import logo from "../assets/images/sytLogo.png"; +import CartIcon from "./shop/CartIcon"; const navLinks = [ { @@ -63,30 +64,38 @@ function Header() { {/* mobile menu */} - {showNavlinks ? ( - - ) : ( - - )} +
+
+ +
+ {showNavlinks ? ( + + ) : ( + + )} +
{/* mobile navlinks */}
-
-
-
- {isSuccess && - swagList?.map((product) => ( -
- -
- ))} - flex -
-
-
-
-
-
-
+
+ {isSuccess && + swagList?.map((product) => ( +
+ +
+ ))}
From 7c934206d46ebc56838ad8a2a774cf02b20a235c Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Tue, 9 Jul 2024 13:35:23 +0300 Subject: [PATCH 33/38] update --- src/pages/shop/sections/Banner/Carousal.jsx | 2 +- src/pages/shop/sections/Banner/index.jsx | 2 +- src/pages/shop/sections/FeaturedProducts.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/shop/sections/Banner/Carousal.jsx b/src/pages/shop/sections/Banner/Carousal.jsx index 05414ef6..a6f72c66 100644 --- a/src/pages/shop/sections/Banner/Carousal.jsx +++ b/src/pages/shop/sections/Banner/Carousal.jsx @@ -33,7 +33,7 @@ function Carousel() { scrollToIndex(newIndex); return newIndex; }); - }, 1000000); // Autoplay every 10 seconds + }, 10000); // Autoplay every 10 seconds return () => clearInterval(interval); }, [width, swagList]); diff --git a/src/pages/shop/sections/Banner/index.jsx b/src/pages/shop/sections/Banner/index.jsx index b42f4663..d2d99318 100644 --- a/src/pages/shop/sections/Banner/index.jsx +++ b/src/pages/shop/sections/Banner/index.jsx @@ -1,4 +1,4 @@ -import Caroussel from "./Caroussel"; +import Caroussel from "./Carousal"; function Banner() { return ( diff --git a/src/pages/shop/sections/FeaturedProducts.jsx b/src/pages/shop/sections/FeaturedProducts.jsx index a7344b60..1b350abe 100644 --- a/src/pages/shop/sections/FeaturedProducts.jsx +++ b/src/pages/shop/sections/FeaturedProducts.jsx @@ -14,7 +14,7 @@ const FeaturedProducts = () => { Our most popular products
-
+
{isSuccess && swagList?.map((product) => (
Date: Tue, 9 Jul 2024 13:38:39 +0300 Subject: [PATCH 34/38] fix link --- src/pages/shop/sections/Banner/Carousal.jsx | 2 +- src/pages/shop/sections/Banner/banner.css | 63 --------------------- 2 files changed, 1 insertion(+), 64 deletions(-) delete mode 100644 src/pages/shop/sections/Banner/banner.css diff --git a/src/pages/shop/sections/Banner/Carousal.jsx b/src/pages/shop/sections/Banner/Carousal.jsx index a6f72c66..42584649 100644 --- a/src/pages/shop/sections/Banner/Carousal.jsx +++ b/src/pages/shop/sections/Banner/Carousal.jsx @@ -68,7 +68,7 @@ function Carousel() {

From KES 2,600

Shop Now diff --git a/src/pages/shop/sections/Banner/banner.css b/src/pages/shop/sections/Banner/banner.css deleted file mode 100644 index 1edc6c67..00000000 --- a/src/pages/shop/sections/Banner/banner.css +++ /dev/null @@ -1,63 +0,0 @@ -.embla { - position: relative; -} - -.embla__viewport { - overflow: hidden; - width: 100%; -} - -.embla__viewport.is-draggable { - cursor: move; - cursor: grab; -} - -.embla__viewport.is-dragging { - cursor: grabbing; -} - -.embla__container { - display: flex; - user-select: none; - -webkit-touch-callout: none; - -khtml-user-select: none; - -webkit-tap-highlight-color: transparent; - margin-left: -10px; -} - -.embla__slide { - position: relative; - min-width: 100%; - padding-left: 10px; -} - -.embla__dot { - cursor: pointer; - position: relative; - padding: 0; - outline: 0; - border: 0; -} - -.embla__dot:after { - background-color: #efefef; - width: 100%; - height: 4px; - border-radius: 2px; - content: ""; -} - -.embla__progress { - position: relative; - justify-self: flex-end; - align-self: center; - max-width: 90%; - overflow: hidden; -} -.embla__progress__bar { - position: absolute; - width: 100%; - top: 0; - bottom: 0; - left: -100%; -} From 391ffe2754af12d3e3ab7bf2e4829b7bb596785a Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Tue, 9 Jul 2024 14:20:08 +0300 Subject: [PATCH 35/38] update css --- src/index.css | 55 ++++++++++----------- src/pages/shop/Homepage.jsx | 2 +- src/pages/shop/sections/Banner/Carousal.jsx | 2 +- src/pages/shop/sections/FilterSection.jsx | 4 -- 4 files changed, 29 insertions(+), 34 deletions(-) diff --git a/src/index.css b/src/index.css index 62cb6b49..d85d1ecd 100644 --- a/src/index.css +++ b/src/index.css @@ -19,7 +19,7 @@ .scrollbar::-webkit-scrollbar { width: 0; height: 6px; - background: #009975; + background: rgb(0 102 78 / 0.1); } .scrollbar::-webkit-scrollbar-thumb { @@ -29,36 +29,35 @@ } .scrollbar::-webkit-scrollbar-track { - background: #009975; - -webkit-box-shadow: inset 0 0 6px #009975; - border-top: 2px solid #e5efec; - border-bottom: 2px solid #e5efec; + background: rgb(0 102 78 / 0.1); + -webkit-box-shadow: inset 0 0 6px rgb(0 102 78 / 0.1); + border-top: 2px solid #f3f4f5; + border-bottom: 2px solid #f3f4f5; } .hr-scrollbar::-webkit-scrollbar { width: 0; height: 6px; - background: #009975; + background: rgb(0 102 78 / 0.1); } .hr-scrollbar::-webkit-scrollbar-thumb { background: #00664e; - border-radius: 12px; } .hr-scrollbar::-webkit-scrollbar-track { - background: #009975; - -webkit-box-shadow: inset 0 0 6px #009975; - border-top: 2px solid #e5efec; - border-bottom: 2px solid #e5efec; + background: rgb(0 102 78 / 0.1); + -webkit-box-shadow: inset 0 0 6px rgb(0 102 78 / 0.1); + border-top: 2px solid #f3f4f5; + border-bottom: 2px solid #f3f4f5; } @media (min-width: 768px) { .scrollbar::-webkit-scrollbar { width: 6px; height: 0; - background: #009975; + background: rgb(0 102 78 / 0.1); } .scrollbar::-webkit-scrollbar-thumb { @@ -68,15 +67,15 @@ } .scrollbar::-webkit-scrollbar-track { - background: #009975; - -webkit-box-shadow: inset 0 0 6px #009975; - border-left: 2px solid #e5efec; - border-right: 2px solid #e5efec; + background: rgb(0 102 78 / 0.1); + -webkit-box-shadow: inset 0 0 6px rgb(0 102 78 / 0.1); + border-left: 2px solid #f3f4f5; + border-right: 2px solid #f3f4f5; } .hr-scrollbar::-webkit-scrollbar { width: 6px; - background: #009975; + background: rgb(0 102 78 / 0.1); } .hr-scrollbar::-webkit-scrollbar-thumb { @@ -86,10 +85,10 @@ } .hr-scrollbar::-webkit-scrollbar-track { - background: #009975; - -webkit-box-shadow: inset 0 0 6px #009975; - border-left: 2px solid #e5efec; - border-right: 2px solid #e5efec; + background: rgb(0 102 78 / 0.1); + -webkit-box-shadow: inset 0 0 6px rgb(0 102 78 / 0.1); + border-left: 2px solid #f3f4f5; + border-right: 2px solid #f3f4f5; } } @layer utilities { @@ -102,7 +101,7 @@ left: 500.9px; top: 66.87px; - background: #009975; + background: rgb(0 102 78 / 0.1); opacity: 0.3; filter: blur(15px); transform: rotate(-75deg); @@ -118,7 +117,7 @@ /* Primary/Green/800 */ - background: #009975; + background: rgb(0 102 78 / 0.1); opacity: 0.3; filter: blur(15px); transform: rotate(-75deg); @@ -135,7 +134,7 @@ /* Primary/Green/800 */ - background: #009975; + background: rgb(0 102 78 / 0.1); opacity: 0.3; filter: blur(15px); transform: matrix(1, -0.03, -0.03, -1, 0, 0); @@ -150,7 +149,7 @@ /* Primary/Green/800 */ - background: #009975; + background: rgb(0 102 78 / 0.1); opacity: 0.3; filter: blur(15px); transform: matrix(1, -0.03, -0.03, -1, 0, 0); @@ -167,7 +166,7 @@ /* Primary/Green/800 */ - background: #009975; + background: rgb(0 102 78 / 0.1); opacity: 0.3; filter: blur(15px); transform: rotate(-75deg); @@ -183,14 +182,14 @@ top: 60.25px; /* Primary/Green/800 */ - background: #009975; + background: rgb(0 102 78 / 0.1); opacity: 0.3; filter: blur(15px); transform: rotate(-75deg); } .bg-primary { - background-color: #009975; + background-color: rgb(0 102 78 / 0.1); } /* Footer */ diff --git a/src/pages/shop/Homepage.jsx b/src/pages/shop/Homepage.jsx index 9076e045..2fe5ab52 100644 --- a/src/pages/shop/Homepage.jsx +++ b/src/pages/shop/Homepage.jsx @@ -18,7 +18,7 @@ function Homepage() { ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background." siteName="SpaceYaTech Shop" /> -
+
diff --git a/src/pages/shop/sections/Banner/Carousal.jsx b/src/pages/shop/sections/Banner/Carousal.jsx index 42584649..33f70ee2 100644 --- a/src/pages/shop/sections/Banner/Carousal.jsx +++ b/src/pages/shop/sections/Banner/Carousal.jsx @@ -68,7 +68,7 @@ function Carousel() {

From KES 2,600

Shop Now diff --git a/src/pages/shop/sections/FilterSection.jsx b/src/pages/shop/sections/FilterSection.jsx index 2f75cd7a..e6420695 100644 --- a/src/pages/shop/sections/FilterSection.jsx +++ b/src/pages/shop/sections/FilterSection.jsx @@ -1,8 +1,6 @@ import SearchInput from "@/components/shop/SearchInput"; import SectionWrapper from "@/components/shop/SectionWrapper"; import SortItems from "@/components/shop/SortItems"; -import { Menu } from "@headlessui/react"; -import { IoMenu } from "react-icons/io5"; import { Link, useParams } from "react-router-dom"; import { categories } from "../data"; @@ -33,8 +31,6 @@ const Categories = () => { {categories.map((item, i) => ( ))} - {" "} -
); }; From 9f87d9da64efca3044495ade7c5ce6cf4f53e852 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Tue, 9 Jul 2024 14:20:25 +0300 Subject: [PATCH 36/38] rm unused packages --- package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/package.json b/package.json index 633df16d..1743a34b 100644 --- a/package.json +++ b/package.json @@ -28,9 +28,6 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "date-fns": "^2.30.0", - "embla-carousel": "^8.1.5", - "embla-carousel-autoplay": "^8.1.5", - "embla-carousel-react": "^8.1.5", "html-react-parser": "^5.0.6", "lucide-react": "^0.395.0", "million": "^3.0.2", From cb4919156a83ea92b320d108a59e95112e4e4df1 Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Tue, 9 Jul 2024 14:21:41 +0300 Subject: [PATCH 37/38] update link --- src/pages/shop/sections/Banner/Carousal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/shop/sections/Banner/Carousal.jsx b/src/pages/shop/sections/Banner/Carousal.jsx index 33f70ee2..bd1efa20 100644 --- a/src/pages/shop/sections/Banner/Carousal.jsx +++ b/src/pages/shop/sections/Banner/Carousal.jsx @@ -68,7 +68,7 @@ function Carousel() {

From KES 2,600

Shop Now From 3ac97f05fa3e7f4d70383541d1ced8c2cf5fc40e Mon Sep 17 00:00:00 2001 From: Joe-Mwangi Date: Tue, 16 Jul 2024 17:33:37 +0300 Subject: [PATCH 38/38] updated product section --- src/pages/shop/sections/AllProducts.jsx | 5 +++-- src/pages/shop/sections/FeaturedProducts.jsx | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/shop/sections/AllProducts.jsx b/src/pages/shop/sections/AllProducts.jsx index 5cf6a61a..57f018de 100644 --- a/src/pages/shop/sections/AllProducts.jsx +++ b/src/pages/shop/sections/AllProducts.jsx @@ -2,9 +2,9 @@ import { useEffect, useState } from "react"; import { useSearchParams } from "react-router-dom"; import { useSwagList } from "../../../hooks/Queries/shop/useSwagList"; import SectionWrapper from "@/components/shop/SectionWrapper"; -import CartIcon from "@/components/shop/CartIcon"; import FilterSection from "./FilterSection"; import ProductCard from "@/components/shop/ProductCard"; +import ItemHeader from "./ItemHeader"; function AllProducts() { const [products, setProducts] = useState([]); @@ -40,7 +40,8 @@ function AllProducts() { return ( <>
- + setOpen((prev) => !prev)} /> +
diff --git a/src/pages/shop/sections/FeaturedProducts.jsx b/src/pages/shop/sections/FeaturedProducts.jsx index 1b350abe..0171a195 100644 --- a/src/pages/shop/sections/FeaturedProducts.jsx +++ b/src/pages/shop/sections/FeaturedProducts.jsx @@ -7,11 +7,11 @@ const FeaturedProducts = () => { const { data: swagList, isSuccess } = useSwagList(); return ( - +

- Our most popular products + New Products in the Inventory