count
92 | ? 1
93 | : current + 1) === index &&
94 | "backdrop-blur-[2px]"
95 | : (current === count ? 0 : current) === index &&
96 | "backdrop-blur-[2px]",
97 | isDesktop
98 | ? (current === 1
99 | ? count - 2
100 | : current === 2
101 | ? count - 1
102 | : current - 3) === index &&
103 | "backdrop-blur-[2px]"
104 | : (current === 1
105 | ? count - 1
106 | : current === 2
107 | ? 0
108 | : current - 2) === index &&
109 | "backdrop-blur-[2px]",
110 | "absolute bg-white/10 right-0 top-0 h-full w-full z-10",
111 | ])}
112 | />
113 | )
114 | }
115 | />
116 |
117 | ))}
118 |
119 |
120 |
121 |
122 | );
123 | };
124 |
125 | export default Reviews;
126 |
--------------------------------------------------------------------------------
/src/components/layout/Navbar/TopNavbar/index.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { integralCF } from "@/styles/fonts";
3 | import Link from "next/link";
4 | import React from "react";
5 | import { NavMenu } from "../navbar.types";
6 | import { MenuList } from "./MenuList";
7 | import {
8 | NavigationMenu,
9 | NavigationMenuList,
10 | } from "@/components/ui/navigation-menu";
11 | import { MenuItem } from "./MenuItem";
12 | import Image from "next/image";
13 | import InputGroup from "@/components/ui/input-group";
14 | import ResTopNavbar from "./ResTopNavbar";
15 | import CartBtn from "./CartBtn";
16 |
17 | const data: NavMenu = [
18 | {
19 | id: 1,
20 | label: "Shop",
21 | type: "MenuList",
22 | children: [
23 | {
24 | id: 11,
25 | label: "Men's clothes",
26 | url: " ",
27 | description: "In attractive and spectacular colors and designs",
28 | },
29 | {
30 | id: 12,
31 | label: "Women's clothes",
32 | url: " ",
33 | description: "Ladies, your style and tastes are important to us",
34 | },
35 | {
36 | id: 13,
37 | label: "Kids clothes",
38 | url: " ",
39 | description: "For all ages, with happy and beautiful colors",
40 | },
41 | {
42 | id: 14,
43 | label: "Bags and Shoes",
44 | url: " ",
45 | description: "Suitable for men, women and all tastes and styles",
46 | },
47 | ],
48 | },
49 | {
50 | id: 2,
51 | type: "MenuItem",
52 | label: "On Sale",
53 | url: " ",
54 | children: [],
55 | },
56 | {
57 | id: 3,
58 | type: "MenuItem",
59 | label: "New Arrivals",
60 | url: " ",
61 | children: [],
62 | },
63 | {
64 | id: 4,
65 | type: "MenuItem",
66 | label: "Brands",
67 | url: " ",
68 | children: [],
69 | },
70 | ];
71 |
72 | const TopNavbar = () => {
73 | return (
74 |
75 |
76 |
77 |
78 |
80 |
87 | SHOP.CO
88 |
89 |
90 |
91 |
92 | {data.map((item) => (
93 |
94 | {item.type === "MenuItem" && (
95 |
101 | ))}
102 |
103 |
104 |
105 |
106 |
115 |
122 |
123 |
145 |
147 | );
148 | };
149 |
150 | export default TopNavbar;
151 |
--------------------------------------------------------------------------------
/src/components/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { ChevronDownIcon } from "@radix-ui/react-icons"
3 | import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
4 | import { cva } from "class-variance-authority"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const NavigationMenu = React.forwardRef<
9 | React.ElementRef
,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, children, ...props }, ref) => (
12 |
20 | {children}
21 |
23 | ))
24 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
25 |
26 | const NavigationMenuList = React.forwardRef<
27 | React.ElementRef,
28 | React.ComponentPropsWithoutRef
29 | >(({ className, ...props }, ref) => (
30 | ,
49 | React.ComponentPropsWithoutRef
50 | >(({ className, children, ...props }, ref) => (
51 |
56 | {children}{" "}
57 |
62 | ))
63 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
64 |
65 | const NavigationMenuContent = React.forwardRef<
66 | React.ElementRef,
67 | React.ComponentPropsWithoutRef
68 | >(({ className, ...props }, ref) => (
69 | ,
84 | React.ComponentPropsWithoutRef
85 | >(({ className, ...props }, ref) => (
86 |
87 |
96 | ))
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef,
102 | React.ComponentPropsWithoutRef
103 | >(({ className, ...props }, ref) => (
104 |
112 |
113 |
114 | ))
115 | NavigationMenuIndicator.displayName =
116 | NavigationMenuPrimitive.Indicator.displayName
117 |
118 | export {
119 | navigationMenuTriggerStyle,
120 | NavigationMenu,
121 | NavigationMenuList,
122 | NavigationMenuItem,
123 | NavigationMenuContent,
124 | NavigationMenuTrigger,
125 | NavigationMenuLink,
126 | NavigationMenuIndicator,
127 | NavigationMenuViewport,
128 | }
129 |
--------------------------------------------------------------------------------
/src/components/homepage/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import AnimatedCounter from "@/components/ui/AnimatedCounter";
2 | import { Separator } from "@/components/ui/separator";
3 | import { cn } from "@/lib/utils";
4 | import { integralCF } from "@/styles/fonts";
5 | import Image from "next/image";
6 | import Link from "next/link";
7 | import React from "react";
8 | import * as motion from "framer-motion/client";
9 |
10 | const Header = () => {
11 | return (
12 |
13 |
14 |
15 |
24 | FIND CLOTHES THAT MATCHES YOUR STYLE
25 |
26 |
32 | Browse through our diverse range of meticulously crafted garments,
33 | designed to bring out your individuality and cater to your sense of
34 | style.
35 |
36 |
41 |
48 |
54 |
55 |
56 |
58 |
59 | International Brands
60 |
61 |
67 |
68 |
70 |
71 | High-Quality Products
72 |
73 |
79 |
80 |
82 |
83 | Happy Customers
84 |
85 |
87 |
88 |
94 |
111 |
113 | );
114 | };
115 |
116 | export default Header;
117 |
--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import {
5 | CaretSortIcon,
6 | CheckIcon,
7 | ChevronDownIcon,
8 | ChevronUpIcon,
9 | } from "@radix-ui/react-icons";
10 | import * as SelectPrimitive from "@radix-ui/react-select";
11 |
12 | import { cn } from "@/lib/utils";
13 |
14 | const Select = SelectPrimitive.Root;
15 |
16 | const SelectGroup = SelectPrimitive.Group;
17 |
18 | const SelectValue = SelectPrimitive.Value;
19 |
20 | const SelectTrigger = React.forwardRef<
21 | React.ElementRef,
22 | React.ComponentPropsWithoutRef
23 | >(({ className, children, ...props }, ref) => (
24 | span]:line-clamp-1",
28 | className
29 | )}
30 | {...props}
31 | >
32 | {children}
33 |
34 |
37 |
38 | ));
39 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
40 |
41 | const SelectScrollUpButton = React.forwardRef<
42 | React.ElementRef,
43 | React.ComponentPropsWithoutRef
44 | >(({ className, ...props }, ref) => (
45 |
53 |
55 | ));
56 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
57 |
58 | const SelectScrollDownButton = React.forwardRef<
59 | React.ElementRef,
60 | React.ComponentPropsWithoutRef
61 | >(({ className, ...props }, ref) => (
62 |
70 |
72 | ));
73 | SelectScrollDownButton.displayName =
74 | SelectPrimitive.ScrollDownButton.displayName;
75 |
76 | const SelectContent = React.forwardRef<
77 | React.ElementRef,
78 | React.ComponentPropsWithoutRef
79 | >(({ className, children, position = "popper", ...props }, ref) => (
80 |
81 |
92 |
100 | {children}
101 |
102 |
104 |
105 | ));
106 | SelectContent.displayName = SelectPrimitive.Content.displayName;
107 |
108 | const SelectLabel = React.forwardRef<
109 | React.ElementRef,
110 | React.ComponentPropsWithoutRef
111 | >(({ className, ...props }, ref) => (
112 | ,
122 | React.ComponentPropsWithoutRef
123 | >(({ className, children, ...props }, ref) => (
124 |
132 |
133 |
134 |
136 |
137 | {children}
138 |
139 | ));
140 | SelectItem.displayName = SelectPrimitive.Item.displayName;
141 |
142 | const SelectSeparator = React.forwardRef<
143 | React.ElementRef,
144 | React.ComponentPropsWithoutRef
145 | >(({ className, ...props }, ref) => (
146 |
194 |
200 |
210 |
212 |
214 |
215 | );
216 | };
217 |
218 | export default Home;
219 |
--------------------------------------------------------------------------------
/src/lib/features/carts/cartsSlice.ts:
--------------------------------------------------------------------------------
1 | import { compareArrays } from "@/lib/utils";
2 | import { Discount } from "@/types/product.types";
3 | import { createSlice } from "@reduxjs/toolkit";
4 | import type { PayloadAction } from "@reduxjs/toolkit";
5 |
6 | const calcAdjustedTotalPrice = (
7 | totalPrice: number,
8 | data: CartItem,
9 | quantity?: number
10 | ): number => {
11 | return (
12 | (totalPrice + data.discount.percentage > 0
13 | ? Math.round(data.price - (data.price * data.discount.percentage) / 100)
14 | : data.discount.amount > 0
15 | ? Math.round(data.price - data.discount.amount)
16 | : data.price) * (quantity ? quantity : data.quantity)
17 | );
18 | };
19 |
20 | export type RemoveCartItem = {
21 | id: number;
22 | attributes: string[];
23 | };
24 |
25 | export type CartItem = {
26 | id: number;
27 | name: string;
28 | srcUrl: string;
29 | price: number;
30 | attributes: string[];
31 | discount: Discount;
32 | quantity: number;
33 | };
34 |
35 | export type Cart = {
36 | items: CartItem[];
37 | totalQuantities: number;
38 | };
39 |
40 | // Define a type for the slice state
41 | interface CartsState {
42 | cart: Cart | null;
43 | totalPrice: number;
44 | adjustedTotalPrice: number;
45 | action: "update" | "add" | "delete" | null;
46 | }
47 |
48 | // Define the initial state using that type
49 | const initialState: CartsState = {
50 | cart: null,
51 | totalPrice: 0,
52 | adjustedTotalPrice: 0,
53 | action: null,
54 | };
55 |
56 | export const cartsSlice = createSlice({
57 | name: "carts",
58 | // `createSlice` will infer the state type from the `initialState` argument
59 | initialState,
60 | reducers: {
61 | addToCart: (state, action: PayloadAction) => {
62 | // if cart is empty then add
63 | if (state.cart === null) {
64 | state.cart = {
65 | items: [action.payload],
66 | totalQuantities: action.payload.quantity,
67 | };
68 | state.totalPrice =
69 | state.totalPrice + action.payload.price * action.payload.quantity;
70 | state.adjustedTotalPrice =
71 | state.adjustedTotalPrice +
72 | calcAdjustedTotalPrice(state.totalPrice, action.payload);
73 | return;
74 | }
75 |
76 | // check item in cart
77 | const isItemInCart = state.cart.items.find(
78 | (item) =>
79 | action.payload.id === item.id &&
80 | compareArrays(action.payload.attributes, item.attributes)
81 | );
82 |
83 | if (isItemInCart) {
84 | state.cart = {
85 | ...state.cart,
86 | items: state.cart.items.map((eachCartItem) => {
87 | if (
88 | eachCartItem.id === action.payload.id
89 | ? !compareArrays(
90 | eachCartItem.attributes,
91 | isItemInCart.attributes
92 | )
93 | : eachCartItem.id !== action.payload.id
94 | )
95 | return eachCartItem;
96 |
97 | return {
98 | ...isItemInCart,
99 | quantity: action.payload.quantity + isItemInCart.quantity,
100 | };
101 | }),
102 | totalQuantities: state.cart.totalQuantities + action.payload.quantity,
103 | };
104 | state.totalPrice =
105 | state.totalPrice + action.payload.price * action.payload.quantity;
106 | state.adjustedTotalPrice =
107 | state.adjustedTotalPrice +
108 | calcAdjustedTotalPrice(state.totalPrice, action.payload);
109 | return;
110 | }
111 |
112 | state.cart = {
113 | ...state.cart,
114 | items: [...state.cart.items, action.payload],
115 | totalQuantities: state.cart.totalQuantities + action.payload.quantity,
116 | };
117 | state.totalPrice =
118 | state.totalPrice + action.payload.price * action.payload.quantity;
119 | state.adjustedTotalPrice =
120 | state.adjustedTotalPrice +
121 | calcAdjustedTotalPrice(state.totalPrice, action.payload);
122 | },
123 | removeCartItem: (state, action: PayloadAction) => {
124 | if (state.cart === null) return;
125 |
126 | // check item in cart
127 | const isItemInCart = state.cart.items.find(
128 | (item) =>
129 | action.payload.id === item.id &&
130 | compareArrays(action.payload.attributes, item.attributes)
131 | );
132 |
133 | if (isItemInCart) {
134 | state.cart = {
135 | ...state.cart,
136 | items: state.cart.items
137 | .map((eachCartItem) => {
138 | if (
139 | eachCartItem.id === action.payload.id
140 | ? !compareArrays(
141 | eachCartItem.attributes,
142 | isItemInCart.attributes
143 | )
144 | : eachCartItem.id !== action.payload.id
145 | )
146 | return eachCartItem;
147 |
148 | return {
149 | ...isItemInCart,
150 | quantity: eachCartItem.quantity - 1,
151 | };
152 | })
153 | .filter((item) => item.quantity > 0),
154 | totalQuantities: state.cart.totalQuantities - 1,
155 | };
156 |
157 | state.totalPrice = state.totalPrice - isItemInCart.price * 1;
158 | state.adjustedTotalPrice =
159 | state.adjustedTotalPrice -
160 | calcAdjustedTotalPrice(isItemInCart.price, isItemInCart, 1);
161 | }
162 | },
163 | remove: (
164 | state,
165 | action: PayloadAction
166 | ) => {
167 | if (!state.cart) return;
168 |
169 | // check item in cart
170 | const isItemInCart = state.cart.items.find(
171 | (item) =>
172 | action.payload.id === item.id &&
173 | compareArrays(action.payload.attributes, item.attributes)
174 | );
175 |
176 | if (!isItemInCart) return;
177 |
178 | state.cart = {
179 | ...state.cart,
180 | items: state.cart.items.filter((pItem) => {
181 | return pItem.id === action.payload.id
182 | ? !compareArrays(pItem.attributes, isItemInCart.attributes)
183 | : pItem.id !== action.payload.id;
184 | }),
185 | totalQuantities: state.cart.totalQuantities - isItemInCart.quantity,
186 | };
187 | state.totalPrice =
188 | state.totalPrice - isItemInCart.price * isItemInCart.quantity;
189 | state.adjustedTotalPrice =
190 | state.adjustedTotalPrice -
191 | calcAdjustedTotalPrice(
192 | isItemInCart.price,
193 | isItemInCart,
194 | isItemInCart.quantity
195 | );
196 | },
197 | },
198 | });
199 |
200 | export const { addToCart, removeCartItem, remove } = cartsSlice.actions;
201 |
202 | export default cartsSlice.reducer;
203 |
--------------------------------------------------------------------------------
/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
5 | import useEmblaCarousel, {
6 | type UseEmblaCarouselType,
7 | } from "embla-carousel-react";
8 |
9 | import { cn } from "@/lib/utils";
10 | import { Button } from "@/components/ui/button";
11 |
12 | type CarouselApi = UseEmblaCarouselType[1];
13 | type UseCarouselParameters = Parameters;
14 | type CarouselOptions = UseCarouselParameters[0];
15 | type CarouselPlugin = UseCarouselParameters[1];
16 |
17 | type CarouselProps = {
18 | opts?: CarouselOptions;
19 | plugins?: CarouselPlugin;
20 | orientation?: "horizontal" | "vertical";
21 | setApi?: (api: CarouselApi) => void;
22 | };
23 |
24 | type CarouselContextProps = {
25 | carouselRef: ReturnType[0];
26 | api: ReturnType[1];
27 | scrollPrev: () => void;
28 | scrollNext: () => void;
29 | canScrollPrev: boolean;
30 | canScrollNext: boolean;
31 | } & CarouselProps;
32 |
33 | const CarouselContext = React.createContext(null);
34 |
35 | function useCarousel() {
36 | const context = React.useContext(CarouselContext);
37 |
38 | if (!context) {
39 | throw new Error("useCarousel must be used within a & CarouselProps
48 | >(
49 | (
50 | {
51 | orientation = "horizontal",
52 | opts,
53 | setApi,
54 | plugins,
55 | className,
56 | children,
57 | ...props
58 | },
59 | ref
60 | ) => {
61 | const [carouselRef, api] = useEmblaCarousel(
62 | {
63 | ...opts,
64 | axis: orientation === "horizontal" ? "x" : "y",
65 | },
66 | plugins
67 | );
68 | const [canScrollPrev, setCanScrollPrev] = React.useState(false);
69 | const [canScrollNext, setCanScrollNext] = React.useState(false);
70 |
71 | const onSelect = React.useCallback((api: CarouselApi) => {
72 | if (!api) {
73 | return;
74 | }
75 |
76 | setCanScrollPrev(api.canScrollPrev());
77 | setCanScrollNext(api.canScrollNext());
78 | }, []);
79 |
80 | const scrollPrev = React.useCallback(() => {
81 | api?.scrollPrev();
82 | }, [api]);
83 |
84 | const scrollNext = React.useCallback(() => {
85 | api?.scrollNext();
86 | }, [api]);
87 |
88 | const handleKeyDown = React.useCallback(
89 | (event: React.KeyboardEvent) => {
90 | if (event.key === "ArrowLeft") {
91 | event.preventDefault();
92 | scrollPrev();
93 | } else if (event.key === "ArrowRight") {
94 | event.preventDefault();
95 | scrollNext();
96 | }
97 | },
98 | [scrollPrev, scrollNext]
99 | );
100 |
101 | React.useEffect(() => {
102 | if (!api || !setApi) {
103 | return;
104 | }
105 |
106 | setApi(api);
107 | }, [api, setApi]);
108 |
109 | React.useEffect(() => {
110 | if (!api) {
111 | return;
112 | }
113 |
114 | onSelect(api);
115 | api.on("reInit", onSelect);
116 | api.on("select", onSelect);
117 |
118 | return () => {
119 | api?.off("select", onSelect);
120 | };
121 | }, [api, onSelect]);
122 |
123 | return (
124 |
137 |
145 | {children}
146 |
147 |
148 | );
149 | }
150 | );
151 | Carousel.displayName = "Carousel";
152 |
153 | const CarouselContent = React.forwardRef<
154 | HTMLDivElement,
155 | React.HTMLAttributes
156 | >(({ className, ...props }, ref) => {
157 | const { carouselRef, orientation } = useCarousel();
158 |
159 | return (
160 |
171 | );
172 | });
173 | CarouselContent.displayName = "CarouselContent";
174 |
175 | const CarouselItem = React.forwardRef<
176 | HTMLDivElement,
177 | React.HTMLAttributes
178 | >(({ className, ...props }, ref) => {
179 | const { orientation } = useCarousel();
180 |
181 | return (
182 |
193 | );
194 | });
195 | CarouselItem.displayName = "CarouselItem";
196 |
197 | const CarouselPrevious = React.forwardRef<
198 | HTMLButtonElement,
199 | React.ComponentProps
200 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
201 | const { orientation, scrollPrev, canScrollPrev } = useCarousel();
202 |
203 | return (
204 |
219 | {props?.children ?? Previous slide
221 |
222 | );
223 | });
224 | CarouselPrevious.displayName = "CarouselPrevious";
225 |
226 | const CarouselNext = React.forwardRef<
227 | HTMLButtonElement,
228 | React.ComponentProps
229 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
230 | const { orientation, scrollNext, canScrollNext } = useCarousel();
231 |
232 | return (
233 |
248 | {props?.children ?? Next slide
250 |
251 | );
252 | });
253 | CarouselNext.displayName = "CarouselNext";
254 |
255 | export {
256 | type CarouselApi,
257 | Carousel,
258 | CarouselContent,
259 | CarouselItem,
260 | CarouselPrevious,
261 | CarouselNext,
262 | };
263 |
--------------------------------------------------------------------------------