+
+
+
+
-
- {/*
*/}
-
+
+
+
+
);
diff --git a/src/pages/shop/data.js b/src/pages/shop/data.js
new file mode 100644
index 00000000..bef46d20
--- /dev/null
+++ b/src/pages/shop/data.js
@@ -0,0 +1,48 @@
+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.",
+ },
+];
+
+export const categories = [
+ {
+ 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/AllProducts.jsx b/src/pages/shop/sections/AllProducts.jsx
new file mode 100644
index 00000000..57f018de
--- /dev/null
+++ b/src/pages/shop/sections/AllProducts.jsx
@@ -0,0 +1,59 @@
+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 FilterSection from "./FilterSection";
+import ProductCard from "@/components/shop/ProductCard";
+import ItemHeader from "./ItemHeader";
+
+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 (
+ <>
+
+ setOpen((prev) => !prev)} />
+
+
+
+
+
+ {isSuccess &&
+ products?.map((product) => (
+
+ ))}
+
+
+ );
+}
+
+export default AllProducts;
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/Carousal.jsx b/src/pages/shop/sections/Banner/Carousal.jsx
new file mode 100644
index 00000000..bd1efa20
--- /dev/null
+++ b/src/pages/shop/sections/Banner/Carousal.jsx
@@ -0,0 +1,91 @@
+import { useSwagList } from "@/hooks/Queries/shop/useSwagList";
+import { useEffect, useRef, useState } from "react";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Link } from "react-router-dom";
+
+function Carousel() {
+ const [width, setWidth] = useState(0);
+ const [selectedIndex, setSelectedIndex] = useState(0);
+
+ const { data: swagList, isSuccess } = useSwagList();
+ const carouselRef = useRef(null);
+
+ useEffect(() => {
+ if (carouselRef.current) {
+ setWidth(carouselRef.current.offsetWidth + 10);
+ }
+ }, [carouselRef.current]);
+
+ const scrollToIndex = (index) => {
+ if (carouselRef.current) {
+ carouselRef.current.scrollTo({
+ left: index * width,
+ behavior: "smooth",
+ });
+ setSelectedIndex(index);
+ }
+ };
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setSelectedIndex((prevIndex) => {
+ const newIndex = (prevIndex + 1) % swagList.length;
+ scrollToIndex(newIndex);
+ return newIndex;
+ });
+ }, 10000); // Autoplay every 10 seconds
+
+ return () => clearInterval(interval);
+ }, [width, swagList]);
+
+ return (
+ <>
+
+
+
+ {isSuccess &&
+ swagList?.map(({ image, name, id }) => (
+
+
+
+ ))}
+
+
+
+
+
+ SpaceYaTech Hoodies
+
+
+ Buy out most stylish tech themed items
+
+
From KES 2,600
+
+ Shop Now
+
+
+ {swagList?.map((_, index) => (
+
+
+
+ );
+}
+
+export default Carousel;
diff --git a/src/pages/shop/sections/Banner/index.jsx b/src/pages/shop/sections/Banner/index.jsx
new file mode 100644
index 00000000..d2d99318
--- /dev/null
+++ b/src/pages/shop/sections/Banner/index.jsx
@@ -0,0 +1,15 @@
+import Caroussel from "./Carousal";
+
+function Banner() {
+ return (
+
+ );
+}
+
+export default Banner;
diff --git a/src/pages/shop/sections/CategoriesProducts.jsx b/src/pages/shop/sections/CategoriesProducts.jsx
index 067e88f1..ab445f5a 100644
--- a/src/pages/shop/sections/CategoriesProducts.jsx
+++ b/src/pages/shop/sections/CategoriesProducts.jsx
@@ -1,128 +1,49 @@
import { useEffect, useState } from "react";
-import { useParams, Link } 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 [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 [searchParams] = useSearchParams();
+ const sort = searchParams.get("sort");
+
+ const [products, setProducts] = useState([]);
const [open, setOpen] = useState(true);
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)} />
-
-
-
- {params?.category}
-
-
-
- {isSuccess &&
- products.map((product) => (
-
-
-
-
-
-
-
- {product.name}
-
-
- {product.price}
-
-
-
-
- ))}
-
-
+
+ setOpen((prev) => !prev)} />
+
+
+
+ {isSuccess &&
+ products.map((product) => (
+
+ ))}
+
);
}
diff --git a/src/pages/shop/sections/FaqSection.jsx b/src/pages/shop/sections/FaqSection.jsx
new file mode 100644
index 00000000..a6a24f6e
--- /dev/null
+++ b/src/pages/shop/sections/FaqSection.jsx
@@ -0,0 +1,20 @@
+import { FAQ, LandingWrapper } from "@/components";
+import { questions } from "../data";
+import SectionWrapper from "@/components/shop/SectionWrapper";
+
+const FaqSection = () => {
+ return (
+
+
+
+
+ Frequently Asked Questions
+
+
+
+
+
+ );
+};
+
+export default FaqSection;
diff --git a/src/pages/shop/sections/FeaturedProducts.jsx b/src/pages/shop/sections/FeaturedProducts.jsx
new file mode 100644
index 00000000..0171a195
--- /dev/null
+++ b/src/pages/shop/sections/FeaturedProducts.jsx
@@ -0,0 +1,33 @@
+import { LandingWrapper } from "@/components";
+import SectionWrapper from "@/components/shop/SectionWrapper";
+import { useSwagList } from "@/hooks/Queries/shop/useSwagList";
+import ProductCard from "@/components/shop/ProductCard";
+
+const FeaturedProducts = () => {
+ const { data: swagList, isSuccess } = useSwagList();
+
+ return (
+
+
+
+
+ New Products in the Inventory
+
+
+
+ {isSuccess &&
+ swagList?.map((product) => (
+
+ ))}
+
+ );
+};
+
+export default FeaturedProducts;
diff --git a/src/pages/shop/sections/FilterSection.jsx b/src/pages/shop/sections/FilterSection.jsx
new file mode 100644
index 00000000..e6420695
--- /dev/null
+++ b/src/pages/shop/sections/FilterSection.jsx
@@ -0,0 +1,56 @@
+import SearchInput from "@/components/shop/SearchInput";
+import SectionWrapper from "@/components/shop/SectionWrapper";
+import SortItems from "@/components/shop/SortItems";
+import { Link, useParams } from "react-router-dom";
+import { categories } from "../data";
+
+const FilterSection = () => {
+ return (
+
+
+
+ );
+};
+
+const Categories = () => {
+ return (
+
+ {categories.map((item, i) => (
+
+ ))}
+
+ );
+};
+
+const CategoryItem = ({ name }) => {
+ const params = useParams();
+ const category = params.category === name;
+
+ return (
+
+
+ {name}
+
+
+ );
+};
+
+export default FilterSection;
diff --git a/src/pages/shop/sections/ItemHeader.jsx b/src/pages/shop/sections/ItemHeader.jsx
index 9003cf82..b0b3e3a8 100644
--- a/src/pages/shop/sections/ItemHeader.jsx
+++ b/src/pages/shop/sections/ItemHeader.jsx
@@ -1,11 +1,12 @@
-import { Combobox, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
-import { FaCheck } from "react-icons/fa";
-import { FaMagnifyingGlass } from "react-icons/fa6";
-import { MdOutlineAddShoppingCart } from "react-icons/md";
-import { Link, useLocation, useParams } from "react-router-dom";
-import { useSwagList } from "../../../hooks/Queries/shop/useSwagList";
-import GoBackBtn from "../../../components/GoBackBtn";
+// 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 CartIcon from "@/components/shop/CartIcon";
+import SectionWrapper from "@/components/shop/SectionWrapper";
function ItemHeader({ show }) {
const { pathname } = useLocation();
@@ -15,33 +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 */}
-
+
+
+ {/* Breadcrumb */}
+
+
+
+
{/* Search box */}
-
+ {/*
{pathname === "/shop" && (
@@ -129,7 +155,7 @@ function ItemHeader({ show }) {
>
-
+
*/}
);
}
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;
diff --git a/src/router/index.jsx b/src/router/index.jsx
index 98b4e6c3..d7d86ab4 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -29,6 +29,7 @@ import {
EventsPage,
AdminLayout,
ShopDashboard,
+ AllProducts,
} from "..";
import { FallbackLoader } from "../components";
@@ -125,6 +126,14 @@ const router = createBrowserRouter([
),
},
+ {
+ path: "/shop/items",
+ element: (
+
}>
+
+
+ ),
+ },
{
path: "/shop/category/:category",
element: (
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)" };
}