diff --git a/src/widgets/BestProduct/BestProduct.module.scss b/src/widgets/BestProduct/BestProduct.module.scss
index 4d2aeda..da99ca8 100644
--- a/src/widgets/BestProduct/BestProduct.module.scss
+++ b/src/widgets/BestProduct/BestProduct.module.scss
@@ -169,6 +169,10 @@
@apply rounded-full;
+ [class="light"] & {
+ background: rgba(var(--color-main-rgb), 1);
+ }
+
@media (max-width: theme('screens.sm')) {
height: 38px;
padding: 0 8px;
diff --git a/src/widgets/BestProduct/BestProduct.tsx b/src/widgets/BestProduct/BestProduct.tsx
index 4342aba..b120642 100644
--- a/src/widgets/BestProduct/BestProduct.tsx
+++ b/src/widgets/BestProduct/BestProduct.tsx
@@ -1,6 +1,7 @@
'use client';
/* eslint-disable indent */
+import { productData } from '@/db';
import { MediaSize } from '@/shared/const';
import { Button } from '@/shared/ui/Button';
import { CardWide } from '@/shared/ui/Card';
@@ -21,22 +22,32 @@ import cls from './BestProduct.module.scss';
export const BestProduct: FC = () => {
const prevRef = useRef(null);
const nextRef = useRef(null);
- const isMobile = useMediaQuery({ maxWidth: MediaSize.SM });
const { theme } = useTheme();
+ const isSM = useMediaQuery({ maxWidth: MediaSize.SM });
+ const isMD = useMediaQuery({ maxWidth: 820 });
+ const isLG = useMediaQuery({ maxWidth: 1120 });
+ const isXL = useMediaQuery({ maxWidth: MediaSize.XL });
+ let slidesPerView: number = 4;
+
+ if (isXL) {
+ slidesPerView = 3.5;
+ }
+ if (isLG) {
+ slidesPerView = 2.5;
+ }
+ if (isMD) {
+ slidesPerView = 1.5;
+ }
+ if (isSM) {
+ slidesPerView = 1;
+ }
+
const cards = [];
- for (let i = 0; i < 7; i++) {
+ for (let i = 0; i < 4; i++) {
cards.push(
-
+
,
);
}
@@ -71,16 +82,12 @@ export const BestProduct: FC = () => {
= ({
- isOpen,
- onOpenChange,
- register = false,
-}) => {
- const [registration, setRegistration] = useState(
- register ? 'sign-up' : 'login',
- );
+export const ModalLogin: FC = ({ isOpen, onOpenChange }) => {
+ const searchParams = useSearchParams();
+ const isRegistration = searchParams.get('state') === 'sign-up';
+
+ // const hrefSearchParams = (state: 'login' | 'sign-up') => {
+ // const getSearchParams = new URLSearchParams(searchParams.toString());
+ // const stringSearchParams = getSearchParams.toString();
+
+ // console.log(stringSearchParams);
+
+ // if (
+ // stringSearchParams.length > 0 &&
+ // !stringSearchParams.includes('state')
+ // ) {
+ // return `?${stringSearchParams}&state=${state}`;
+ // }
+
+ // return `?state=${state}`;
+ // };
const renderLogin = useMemo(() => {
return (
-
+
diff --git a/src/widgets/Navbar/ui/Navbar/Navbar.module.scss b/src/widgets/Navbar/ui/Navbar/Navbar.module.scss
index 0cc93ce..fe8a85c 100644
--- a/src/widgets/Navbar/ui/Navbar/Navbar.module.scss
+++ b/src/widgets/Navbar/ui/Navbar/Navbar.module.scss
@@ -62,11 +62,11 @@
}
.input {
- max-width: 155px;
+ width: 155px;
transition: all .3s ease;
@media (max-width: theme('screens.sm')) {
- max-width: 100%;
+ width: 100%;
}
input {
@@ -127,6 +127,10 @@
flex: 1;
align-items: center;
justify-content: left;
+
+ @media (max-width: theme('screens.xl')) {
+ flex: 0;
+ }
}
.center {
@@ -137,7 +141,7 @@
justify-content: center;
height: 100%;
- @media (max-width: theme('screens.lg')) {
+ @media (max-width: theme('screens.xl')) {
flex: 1;
}
}
@@ -160,7 +164,7 @@
padding: 0 15px;
color: var(--color-main-inverted);
- @media (max-width: theme('screens.sm')) {
+ @media (max-width: theme('screens.lg')) {
@apply text-xs;
}
}
@@ -177,7 +181,7 @@
align-items: center;
justify-content: right;
- @media (max-width: theme('screens.lg')) {
+ @media (max-width: theme('screens.xl')) {
flex: 0;
}
diff --git a/src/widgets/Navbar/ui/Navbar/Navbar.tsx b/src/widgets/Navbar/ui/Navbar/Navbar.tsx
index 979cfcb..ef0d8bc 100644
--- a/src/widgets/Navbar/ui/Navbar/Navbar.tsx
+++ b/src/widgets/Navbar/ui/Navbar/Navbar.tsx
@@ -5,9 +5,8 @@ import { SearchIcon } from '@/shared/assets/icon/Search';
import { MediaSize } from '@/shared/const';
import { Avatar } from '@/shared/ui/Avatar';
import { Input } from '@/shared/ui/Input';
-import { Loader } from '@/shared/ui/Loader';
import { Logo } from '@/shared/ui/Logo';
-import { Tooltip, useDisclosure } from '@nextui-org/react';
+import { Spinner, Tooltip, useDisclosure } from '@nextui-org/react';
import cn from 'clsx';
import Image from 'next/image';
import Link from 'next/link';
@@ -38,7 +37,8 @@ export const Navbar = memo(
// }
const pathname = usePathname();
- const isPhone = useMediaQuery({ maxWidth: MediaSize.SM });
+ const isSM = useMediaQuery({ maxWidth: MediaSize.SM });
+ const isLG = useMediaQuery({ maxWidth: MediaSize.LG });
const [isScrollingDown, setIsScrollingDown] = useState(true);
const [prevScrollY, setPrevScrollY] = useState(0);
@@ -58,9 +58,12 @@ export const Navbar = memo(
};
}, [prevScrollY]);
- const isActive = useCallback((href: string) => {
- return pathname === href ? cls.selected : '';
- }, []);
+ const isActive = useCallback(
+ (href: string) => {
+ return pathname === href ? cls.selected : '';
+ },
+ [pathname],
+ );
const [isSearch, setIsSearch] = useState(false);
const { onOpenChange } = useDisclosure();
@@ -146,7 +149,7 @@ export const Navbar = memo(
<>
- {isPhone && (
+ {isLG && (
- {isPhone && (
+ {isLG && (
*/}
- {isPhone && (
+ {isLG && (
*/}
);
- }, [isActive, isPhone]);
+ }, [isActive, isLG]);
const renderMobile = () => (
@@ -210,7 +213,7 @@ export const Navbar = memo(
content='Что-то загружается...'
className={cls.tooltip}
>
-
+
@@ -241,10 +244,10 @@ export const Navbar = memo(
<>
- {isPhone && renderSearch()}
+ {isSM && renderSearch()}
);
diff --git a/src/widgets/NavigationPanel/data.ts b/src/widgets/NavigationPanel/data.ts
index 5139183..03a3a3c 100644
--- a/src/widgets/NavigationPanel/data.ts
+++ b/src/widgets/NavigationPanel/data.ts
@@ -1,7 +1,5 @@
-import { PathnamesKeys } from '@/shared/config/i18n/config';
-
interface NavigationPanelItem {
- to: PathnamesKeys;
+ to: string;
image: string;
alt: string;
title: string;
diff --git a/src/widgets/ReviewsCarousel/ReviewsCarousel.module.scss b/src/widgets/ReviewsCarousel/ReviewsCarousel.module.scss
index 94a3e5e..c22ba43 100644
--- a/src/widgets/ReviewsCarousel/ReviewsCarousel.module.scss
+++ b/src/widgets/ReviewsCarousel/ReviewsCarousel.module.scss
@@ -2,13 +2,11 @@
.wrapper {
position: relative;
- max-width: 100%;
- margin-top: 70px;
}
.video {
position: absolute;
- top: 500px;
+ top: 310px;
z-index: -10;
width: 100%;
height: 880px;
@@ -45,7 +43,7 @@
content: '';
background: linear-gradient(90deg, var(--color-background) 22.555%, rgba(3, 2, 13, 0%) 100%);
- @media (max-width: theme('screens.sm')) {
+ @media (max-width: theme('screens.md')) {
content: none;
}
}
@@ -77,7 +75,7 @@
&:hover {
border: 1px solid var(--color-border-select);
- transform: scale(1.025)
+ transform: scale(1.025);
}
}
@@ -85,7 +83,7 @@
.reviewRow2 {
display: flex;
gap: 30px;
- width: 100%;
+ max-width: 100%;
padding: 15px;
}
diff --git a/src/widgets/ReviewsCarousel/ReviewsCarousel.tsx b/src/widgets/ReviewsCarousel/ReviewsCarousel.tsx
index 4dec86b..71ac536 100644
--- a/src/widgets/ReviewsCarousel/ReviewsCarousel.tsx
+++ b/src/widgets/ReviewsCarousel/ReviewsCarousel.tsx
@@ -1,5 +1,6 @@
'use client';
+import { getSettings } from '@/app/providers/StoreProvider';
import { MediaSize } from '@/shared/const';
import { SlideHeading } from '@/shared/ui/HeadingSlide';
import { StarRating } from '@/shared/ui/StarRating';
@@ -8,16 +9,28 @@ import cn from 'clsx';
import Image from 'next/image';
import Link from 'next/link';
import { FC } from 'react';
+import { useSelector } from 'react-redux';
import { useMediaQuery } from 'react-responsive';
-import { Autoplay } from 'swiper/modules';
+import { Autoplay, FreeMode } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import cls from './ReviewsCarousel.module.scss';
export const ReviewsCarousel: FC = () => {
- const isMobile = useMediaQuery({ maxWidth: MediaSize.SM });
+ const isSM = useMediaQuery({ maxWidth: MediaSize.SM });
+ const isMD = useMediaQuery({ maxWidth: MediaSize.MD });
+ const isXL = useMediaQuery({ maxWidth: MediaSize.XL });
+ const isOptimization = useSelector(getSettings('optimization'));
+
+ let slidesPerView: number = 3;
+ if (isXL) {
+ slidesPerView = 2;
+ }
+ if (isMD) {
+ slidesPerView = 1;
+ }
const cards = [];
- for (let i = 0; i < 5; i++) {
+ for (let i = 0; i < 20; i++) {
cards.push(
@@ -45,58 +58,59 @@ export const ReviewsCarousel: FC = () => {
}
return (
-
-
-
-
- {cards}
-
-
- {cards}
-
+ <>
+
+
+
+
+ {cards}
+
+
+ {cards}
+
+
+ {isSM || isOptimization ? (
+
+ ) : (
+
+ )}
- {isMobile ? (
-
- ) : (
-
- )}
-
+
);
};
diff --git a/src/widgets/Sorts/model/slice/sortSlice.ts b/src/widgets/Sorts/model/slice/sortSlice.ts
index c3e10a5..d1a7492 100644
--- a/src/widgets/Sorts/model/slice/sortSlice.ts
+++ b/src/widgets/Sorts/model/slice/sortSlice.ts
@@ -1,4 +1,6 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import { maxPrice, minPrice } from '../../ui/Sorts';
import { getSortSearchparams } from '../features/getSortSearchparams';
import {
SortAge,
@@ -13,8 +15,8 @@ export const sortInitialState = {
sex: ['male', 'female'],
age: ['adult'],
sorting: 'popular',
- minPrice: 0,
- maxPrice: 15000,
+ minPrice,
+ maxPrice,
};
const initialState = (): SortState => {
diff --git a/src/widgets/Sorts/ui/Sorts.tsx b/src/widgets/Sorts/ui/Sorts.tsx
index ae2c24b..c6cd1ea 100644
--- a/src/widgets/Sorts/ui/Sorts.tsx
+++ b/src/widgets/Sorts/ui/Sorts.tsx
@@ -1,5 +1,6 @@
'use client';
+import { productData } from '@/db';
import { Button } from '@/shared/ui/Button';
import { Input } from '@/shared/ui/Input';
import { Slider } from '@nextui-org/react';
@@ -11,10 +12,25 @@ import { sortSlice } from '../model/slice/sortSlice';
import { SortButtons } from './SortButtons';
import cls from './Sorts.module.scss';
-export const Sorts: FC = () => {
- const minPrice = 0;
- const maxPrice = 15000;
+// export const minPrice = productData
+// .map((item) => item.markets[0].price)
+// .reduce((a, b) => {
+// if (a < b) {
+// return a;
+// }
+// return b;
+// });
+export const minPrice = 0;
+export const maxPrice = productData
+ .map((item) => item.markets[0].price)
+ .reduce((a, b) => {
+ if (a > b) {
+ return a;
+ }
+ return b;
+ });
+export const Sorts: FC = () => {
const router = useRouter();
const sort = useSelector(getSort);
const dispatch = useDispatch();
diff --git a/src/widgets/TopPage/TopPage.module.scss b/src/widgets/TopPage/TopPage.module.scss
index 8514121..350844d 100644
--- a/src/widgets/TopPage/TopPage.module.scss
+++ b/src/widgets/TopPage/TopPage.module.scss
@@ -1,8 +1,9 @@
.backgroundTop {
- position: absolute;
- top: calc(var(--navbar-height) + 10px);
+ position: relative;
+ top: -90px;
left: 0;
z-index: var(--z-index-hero-images);
+ grid-column: 1 / 3;
width: 100%;
height: 220px;
margin-bottom: -220px;
@@ -57,7 +58,7 @@
}
}
- @media (max-width: theme('screens.sm')) {
+ @media (max-width: theme('screens.md')) {
grid-template-columns: 1fr;
}
}
@@ -68,7 +69,7 @@
flex-direction: column;
gap: 80px;
- @media (max-width: theme('screens.sm')) {
+ @media (max-width: theme('screens.md')) {
align-items: center;
}
}
diff --git a/src/widgets/TopPage/TopPage.tsx b/src/widgets/TopPage/TopPage.tsx
index d3bf02d..b3320c4 100644
--- a/src/widgets/TopPage/TopPage.tsx
+++ b/src/widgets/TopPage/TopPage.tsx
@@ -1,5 +1,6 @@
'use client';
+import { getSettings } from '@/app/providers/StoreProvider';
import { GiftIcon } from '@/shared/assets/icon/Gift';
import { MediaSize } from '@/shared/const';
import { Button } from '@/shared/ui/Button';
@@ -7,6 +8,7 @@ import { Heading } from '@/widgets/Heading';
import cn from 'clsx';
import Link from 'next/link';
import { FC, ReactNode, memo, useMemo } from 'react';
+import { useSelector } from 'react-redux';
import MediaQuery from 'react-responsive';
import cls from './TopPage.module.scss';
@@ -34,6 +36,8 @@ export const TopPage: FC
= memo(
// shadowRoot.appendChild(style);
// }, []);
+ const isOptimization = useSelector(getSettings('optimization'));
+
const renderHeading = useMemo(() => {
return ;
}, [description, note, title]);
@@ -46,7 +50,10 @@ export const TopPage: FC = memo(
>
{!compact && (
-