update adaptive + rem, FSD sort, modal update

app/[locale]/layout.tsx

@@ -2,12 +2,12 @@ import { ClientProviders } from '@/app/providers/ClientProviders';
 import { ServerProviders } from '@/app/providers/ServerProviders';
 import '@/app/styles/index.scss';
 import { Notification } from '@/entities/Notification';
+import { ScrollUp } from '@/features/ScrollUp';
 import { locales } from '@/shared/config/i18n/config';
 import { SpaceCanvas } from '@/shared/ui/SpaceCanvas';
 import { Footer } from '@/widgets/Footer';
 import { Navbar } from '@/widgets/Navbar';
 import { PageLoader } from '@/widgets/PageLoader';
-import { ScrollUp } from '@/widgets/ScrollUp';
 import { Metadata } from 'next';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
@@ -16,8 +16,8 @@ import { ReactNode, Suspense } from 'react';
 const inter = Inter({ subsets: ['latin'] });
 
 type LocaleLayoutProps = {
-	children: ReactNode,
-	params: { locale: string },
+	children: ReactNode;
+	params: { locale: string };
 };
 
 export function generateStaticParams() {

package.json

@@ -61,6 +61,7 @@
 		"autoprefixer": "^10.4.18",
 		"clsx": "^2.1.0",
 		"color2k": "^2.0.3",
+		"crypto": "^1.0.1",
 		"eslint": "^8.56.0",
 		"eslint-config-next": "14.1.0",
 		"eslint-config-prettier": "^9.1.0",

src/app/providers/ClientProviders.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Theme } from '@/shared/types';
+import { Theme } from '@/shared/const/theme';
 import { NextUIProvider } from '@nextui-org/react';
 import { ThemeProvider } from 'next-themes';
 import { ReactNode } from 'react';

src/app/styles/index.scss

@@ -6,9 +6,16 @@
 @import "swiper";
 @import "nextui";
 
+html {
+	font-size: 16px;
+
+	@media (max-width: theme('screens.sm')) {
+		font-size: 14px;
+	}
+}
+
 body {
 	font-family: var(--font-family-main);
-	font-size: 16px;
 	font-weight: 300;
 	line-height: 1.5;
 	isolation: isolate;

src/app/styles/variables.scss

@@ -42,7 +42,7 @@
 
 	// Others
 	--position-bottom: 45px;
-	--position-top: 45px;
+	--position-top: calc(var(--navbar-height) + 10px);
 
 	@media (max-width: theme('screens.sm')) {
 		--position-bottom: calc(var(--navbar-height-mobile) + 10px);

src/db.ts

@@ -0,0 +1,68 @@
+import { DataCardProps } from './shared/ui/Card';
+
+export const cardData: DataCardProps[] = [
+	{
+		id: 1,
+		src: '/',
+		links: [
+			{
+				src: 'exampleLink1',
+				market: 'ozon',
+			},
+			{
+				src: 'exampleLink2',
+				market: 'yandex',
+			},
+		],
+		images: ['cat.png', 'cat.png', 'cat.png'],
+		title: 'Example Title 1',
+		rating: 4.5,
+		reviewCount: 100,
+		currency: 'RUB',
+		price: 50,
+		oldPrice: 60,
+	},
+	{
+		id: 2,
+		src: '/',
+		links: [
+			{
+				src: 'exampleLink1',
+				market: 'ozon',
+			},
+			{
+				src: 'exampleLink2',
+				market: 'yandex',
+			},
+		],
+		images: ['cat.png', 'cat.png', 'cat.png'],
+		title: 'Example Title 2',
+		rating: 4.5,
+		reviewCount: 100,
+		currency: 'RUB',
+		price: 50,
+		oldPrice: 60,
+	},
+	{
+		id: 3,
+		src: '/',
+		links: [
+			{
+				src: 'exampleLink1',
+				market: 'ozon',
+			},
+			{
+				src: 'exampleLink2',
+				market: 'yandex',
+			},
+		],
+		images: ['cat.png', 'cat.png', 'cat.png'],
+		title:
+			'Example Title Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit',
+		rating: 4.5,
+		reviewCount: 100,
+		currency: 'RUB',
+		price: 50,
+		oldPrice: 60,
+	},
+];

src/entities/Notification/Notification.module.scss

@@ -27,11 +27,12 @@
 		backdrop-filter: none;
 	}
 
+	@media (max-width: theme('screens.md')) {
+		@include background(1);
+	}
+
 	@media (max-width: theme('screens.sm')) {
 		width: calc(100% - 10px * 2);
-
-		@apply text-sm;
-		@include background(1);
 	}
 
 	button {

src/widgets/ScrollUp/ScrollUp.module.scss → src/features/ScrollUp/ScrollUp.module.scss

@@ -8,7 +8,7 @@
 	opacity: 0;
 
 
-	@media (max-width: theme('screens.sm')) {
+	@media (max-width: theme('screens.md')) {
 		top: var(--position-top);
 		right: 10px;
 		bottom: auto;

src/widgets/ScrollUp/ScrollUp.tsx → src/features/ScrollUp/ScrollUp.tsx

@@ -49,7 +49,7 @@ export const ScrollUp: FC<ScrollUpProps> = ({ className = '' }) => {
 				'rounded-full',
 			)}
 		>
-			<ArrowUpIcon />
+			<ArrowUpIcon width='1.5rem' height='1.5rem' />
 			{t('top')}
 		</Button>
 	);

src/shared/assets/icon/Mail.jsx

@@ -3,18 +3,26 @@ export const MailIcon = ({
 	...props
 }) => (
 	<svg
-		aria-hidden='true'
-		fill='none'
-		focusable='false'
-		height='1em'
-		role='presentation'
+		width='24'
+		height='24'
 		viewBox='0 0 24 24'
-		width='1em'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
 		{...props}
 	>
 		<path
-			d='M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z'
-			fill={color}
+			d='M21 11.9999C21 10.1194 20.411 8.28609 19.3157 6.75751C18.2203 5.22892 16.6736 4.08184 14.8929 3.47737C13.1122 2.8729 11.1868 2.84142 9.3873 3.38733C7.58776 3.93325 6.00442 5.02914 4.85967 6.5211C3.71492 8.01305 3.06627 9.82611 3.00481 11.7056C2.94335 13.5852 3.47218 15.4367 4.51702 17.0003C5.56187 18.5638 7.07023 19.7608 8.83027 20.4231C10.5903 21.0854 12.5136 21.1798 14.33 20.6929'
+			stroke={color}
+			strokeLinecap='round'
+		/>
+		<path
+			d='M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z'
+			stroke={color}
+		/>
+		<path
+			d='M16 9V13.5C16 14.163 16.2634 14.7989 16.7322 15.2678C17.2011 15.7366 17.837 16 18.5 16C19.163 16 19.7989 15.7366 20.2678 15.2678C20.7366 14.7989 21 14.163 21 13.5V12'
+			stroke={color}
+			strokeLinecap='round'
 		/>
 	</svg>
 );

src/shared/assets/icon/Password.jsx

@@ -0,0 +1,20 @@
+export const PasswordIcon = ({
+	color = 'var(--color-main-inverted)',
+	...props
+}) => (
+	<svg
+		width='24'
+		height='24'
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<path
+			d='M12 10V14M10 13L14 11M10 11L14 13M5 10V14M3 13L7 11M3 11L7 13M19 10V14M17 13L21 11M17 11L21 13'
+			stroke={color}
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/shared/assets/icon/User.jsx

@@ -0,0 +1,23 @@
+export const UserIcon = ({
+	color = 'var(--color-main-inverted)',
+	...props
+}) => (
+	<svg
+		width='24'
+		height='24'
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<path
+			d='M12 10C14.2091 10 16 8.20914 16 6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6C8 8.20914 9.79086 10 12 10Z'
+			stroke='white'
+		/>
+		<path
+			d='M19.998 18C20 17.836 20 17.669 20 17.5C20 15.015 16.418 13 12 13C7.582 13 4 15.015 4 17.5C4 19.985 4 22 12 22C14.231 22 15.84 21.843 17 21.563'
+			stroke={color}
+			strokeLinecap='round'
+		/>
+	</svg>
+);

src/shared/const/localstorage.ts

@@ -0,0 +1,4 @@
+export enum LocalstorageKeys {
+	LIKED = 'liked-products-id',
+	HISTORY = 'history-products-id',
+}

src/shared/const/market.ts

@@ -0,0 +1,14 @@
+export type MarketType = 'ozon' | 'yandex';
+
+export const Market = {
+	ozon: {
+		name: 'Ozon',
+		color: 'var(--color-ozon-rgb)',
+		image: 'ozon.svg',
+	},
+	yandex: {
+		name: 'Yandex Market',
+		color: 'var(--color-yandex-rgb)',
+		image: 'yandex-market.svg',
+	},
+};

src/shared/const/theme.ts

@@ -0,0 +1,4 @@
+export enum Theme {
+	LIGHT = 'light',
+	DARK = 'dark',
+}

src/shared/lib/.deprecated/useElementColor.tsx

@@ -0,0 +1,28 @@
+// import React, { useEffect, useState } from 'react';
+
+// interface ElementColorHookOptions {
+// 	ref: React.RefObject<HTMLElement>;
+// 	disableRipple: boolean;
+// }
+
+// function getElementColor(element: HTMLElement | null): string | null {
+// 	if (!element) return null;
+// 	const computedStyle = window.getComputedStyle(element);
+// 	return computedStyle.color;
+// }
+
+// export function useElementColor({
+// 	ref,
+// 	disableRipple,
+// }: ElementColorHookOptions): string | null {
+// 	const [currentColor, setCurrentColor] = useState<string | null>(null);
+
+// 	useEffect(() => {
+// 		if (!disableRipple && ref.current) {
+// 			const color = getElementColor(ref.current);
+// 			setCurrentColor(color);
+// 		}
+// 	}, [ref, disableRipple]);
+
+// 	return currentColor;
+// }

src/shared/lib/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useCurrency } from './useCurrency/useCurrency';
+export type { Currency } from './useCurrency/useCurrency';
+export { getStorageData } from './useStorageData/getStorageData';
+export { useStorageData } from './useStorageData/useStorageData';