add product page

MarkMelior · Mar 28, 2024 · 53421cd · 53421cd
1 parent de178e4
commit 53421cd
Show file tree

Hide file tree

Showing 20 changed files with 810 additions and 105 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import { ServerProviders } from '@/app/providers/ServerProviders';
 import '@/app/styles/index.scss';
 import { Notification } from '@/entities/Notification';
 import { ScrollUp } from '@/features/ScrollUp';
+import { BookmarkIcon } from '@/shared/assets/icon/Bookmark';
 import { SpaceCanvas } from '@/shared/ui/SpaceCanvas';
 import { Footer } from '@/widgets/Footer';
 import { Navbar } from '@/widgets/Navbar';
@@ -34,7 +35,7 @@ export default function LocaleLayout({ children }: LocaleLayoutProps) {
 							{children}
 							<Notification
 								message='Добавьте наш сайт в закладки, чтобы не потерять'
-								icon='/images/icons/bookmark-fill.svg'
+								startContent={<BookmarkIcon opacity={0.5} />}
 							/>
 							<SpaceCanvas />
 							<ScrollUp />

diff --git a/src/app/styles/themes/dark.scss b/src/app/styles/themes/dark.scss
@@ -11,11 +11,11 @@
 	--color-text: 255, 255, 255;
 
 	// Light ellipse
-	--light-color-ellipse-1: rgb(90, 186, 255, 30%);
+	--light-color-ellipse-1: rgb(90, 186, 255, 35%);
 	--light-blur-ellipse-1: blur(400px);
-	--light-color-ellipse-2: rgb(255, 90, 209, 30%);
+	--light-color-ellipse-2: rgb(255, 90, 209, 5%);
 	--light-blur-ellipse-2: blur(600px);
-	--light-color-ellipse-3: rgb(255, 90, 209, 30%);
+	--light-color-ellipse-3: rgb(255, 90, 209, 5%);
 	--light-blur-ellipse-3: blur(400px);
 
 	// @media (max-width: $display-desktop) {

diff --git a/src/db.ts b/src/db.ts
@@ -13,7 +13,14 @@ export const productData: ProductDataProps[] = [
 		creativity: 5,
 		filter: ['joke'],
 		characteristics: {
-			'Характеристика 1': 'Значение характеристики 1',
+			Версия: ['global', 'Ростест (EAC)'],
+			Конфигурация: ['4/128 ГБ', '6/128 ГБ', '8/256 ГБ'],
+			'Коротко о товаре': {
+				Емкость: '20000 мА·ч (74 Вт·ч)',
+				Вес: '438 г',
+				Фото: '3 камеры, основная 50 МП',
+				Процессор: 'Qualcomm Snapdragon 685',
+			},
 		},
 		markets: [
 			{
@@ -25,6 +32,15 @@ export const productData: ProductDataProps[] = [
 				price: 13999,
 				oldPrice: 21947,
 			},
+			{
+				market: 'yandex',
+				link: 'https://www.ozon.ru/product/logitech-naushniki-provodnye-s-mikrofonom-3-5-mm-chernyy-1353218032/',
+				rating: 4.5,
+				reviewCount: 68,
+				currency: 'RUB',
+				price: 13578,
+				oldPrice: 19653,
+			},
 		],
 	},
 	{
@@ -34,7 +50,7 @@ export const productData: ProductDataProps[] = [
 		creativity: 5,
 		filter: ['female', 'love'],
 		characteristics: {
-			'Характеристика 1': 'Значение характеристики 1',
+			'Характеристика 1': ['Значение характеристики 1'],
 		},
 		markets: [
 			{
@@ -55,7 +71,7 @@ export const productData: ProductDataProps[] = [
 		creativity: 5,
 		filter: ['kid'],
 		characteristics: {
-			'Характеристика 1': 'Значение характеристики 1',
+			'Характеристика 1': ['Значение характеристики 1'],
 		},
 		markets: [
 			{
@@ -76,7 +92,7 @@ export const productData: ProductDataProps[] = [
 		creativity: 5,
 		filter: ['year'],
 		characteristics: {
-			'Характеристика 1': 'Значение характеристики 1',
+			'Характеристика 1': ['Значение характеристики 1'],
 		},
 		markets: [
 			{

diff --git a/src/entities/Notification/Notification.module.scss b/src/entities/Notification/Notification.module.scss
@@ -2,7 +2,6 @@
 
 .wrapper {
 	position: fixed;
-	bottom: var(--position-bottom);
 	left: 50%;
 	z-index: var(--z-index-notification);
 	display: flex;
@@ -13,10 +12,10 @@
 	max-width: 1320px;
 	padding: 15px 30px;
 	overflow: hidden;
+	user-select: none;
 	backdrop-filter: var(--blur-md);
 	border: solid 1px var(--color-border);
 	transform: translateX(-50%);
-	animation: fadeIn .3s ease-out forwards;
 
 	@include background(.3);
 	@apply rounded-xl;
@@ -41,7 +40,68 @@
 	}
 }
 
-@keyframes fadeIn {
+.content {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}
+
+.startContent {
+	max-width: 24px;
+	max-height: 24px;
+}
+
+.progress {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 1px;
+
+	&>div>div {
+		animation: progress var(--animation-duration-notification) linear forwards;
+	}
+}
+
+.top {
+	top: 0;
+	animation: fadeInFromTop .3s ease-out forwards;
+}
+
+.bottom {
+	bottom: var(--position-bottom);
+	animation: fadeInFromBottom .3s ease-out forwards;
+}
+
+.closing {
+	animation: fadeOutFromBottom var(--animation-close-duration-notification) ease-out forwards;
+}
+
+.closing.top {
+	animation: fadeOutFromTop var(--animation-close-duration-notification) ease-out forwards;
+}
+
+.swipeLeft {
+	animation: swipeLeft var(--animation-close-duration-notification) ease-out forwards !important;
+}
+
+.swipeRight {
+	animation: swipeRight var(--animation-close-duration-notification) ease-out forwards !important;
+}
+
+@keyframes fadeInFromTop {
+	0% {
+		opacity: 0;
+		transform: translate(-50%, 0);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translate(-50%, 100px);
+	}
+}
+
+@keyframes fadeInFromBottom {
 	0% {
 		opacity: 0;
 		transform: translate(-50%, 100px);
@@ -53,11 +113,19 @@
 	}
 }
 
-.closing {
-	animation: fadeOut var(--animation-close-duration-notification) ease-out forwards;
+@keyframes fadeOutFromTop {
+	0% {
+		opacity: 1;
+		transform: translate(-50%, 100px);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translate(-50%, 0);
+	}
 }
 
-@keyframes fadeOut {
+@keyframes fadeOutFromBottom {
 	0% {
 		opacity: 1;
 		transform: translate(-50%, 0);
@@ -69,14 +137,6 @@
 	}
 }
 
-.swipeLeft {
-	animation: swipeLeft var(--animation-close-duration-notification) ease-out forwards;
-}
-
-.swipeRight {
-	animation: swipeRight var(--animation-close-duration-notification) ease-out forwards;
-}
-
 @keyframes swipeLeft {
 	0% {
 		opacity: 1;
@@ -101,32 +161,6 @@
 	}
 }
 
-.icon {
-	opacity: .5;
-
-	&svg *[fill] {
-		fill: var(--color-main-inverted);
-	}
-}
-
-.content {
-	display: flex;
-	gap: 10px;
-	align-items: center;
-}
-
-.progress {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 1px;
-
-	&>div>div {
-		animation: progress var(--animation-duration-notification) linear forwards;
-	}
-}
-
 @keyframes progress {
 	0% {
 		transform: translateX(0%);

diff --git a/src/entities/Notification/Notification.tsx b/src/entities/Notification/Notification.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { BookmarkIcon } from '@/shared/assets/icon/Bookmark';
 import { CrossIcon } from '@/shared/assets/icon/Cross';
 import { Button } from '@/shared/ui/Button';
 import { Progress } from '@nextui-org/react';
@@ -20,21 +19,23 @@ interface NotificationProps {
 	message: string;
 	duration?: number;
 	animationCloseDuration?: number;
-	closable?: boolean;
 	onClose?: () => void;
 	onCancel?: () => void;
-	icon?: string;
+	startContent?: JSX.Element;
+	placement?: 'top' | 'bottom';
+	closeOnClick?: boolean;
 }
 
 export const Notification: FC<NotificationProps> = memo(
 	({
 		message,
 		duration = 7000,
 		animationCloseDuration = 300,
-		closable = true,
 		onClose,
 		onCancel,
-		icon,
+		startContent,
+		closeOnClick,
+		placement = 'bottom',
 	}) => {
 		const [visible, setVisible] = useState(true);
 		const [closing, setClosing] = useState(false);
@@ -101,6 +102,8 @@ export const Notification: FC<NotificationProps> = memo(
 					[cls.closing]: closing,
 					[cls.swipeLeft]: swipeClose && touchEndX < touchStartX && !closing,
 					[cls.swipeRight]: swipeClose && touchEndX > touchStartX && !closing,
+					[cls.top]: placement === 'top',
+					[cls.bottom]: placement === 'bottom',
 				})}
 				style={
 					{
@@ -111,6 +114,7 @@ export const Notification: FC<NotificationProps> = memo(
 				onTouchStart={handleTouchStart}
 				onTouchMove={handleTouchMove}
 				onTouchEnd={handleTouchEnd}
+				onClick={closeOnClick ? handleClose : undefined}
 			>
 				<Progress
 					className={cls.progress}
@@ -119,10 +123,10 @@ export const Notification: FC<NotificationProps> = memo(
 					color='success'
 				/>
 				<div className={cls.content}>
-					{icon && <BookmarkIcon className={cn(cls.icon, 'noselect')} />}
+					<div className={cls.startContent}>{startContent}</div>
 					<p>{message}</p>
 				</div>
-				{closable && (
+				{!closeOnClick && (
 					<Button slice className='rounded-lg py-0 px-0' onClick={handleClose}>
 						<CrossIcon />
 					</Button>

diff --git a/src/shared/assets/icon/Copy.jsx b/src/shared/assets/icon/Copy.jsx
@@ -0,0 +1,26 @@
+export const CopyIcon = ({
+	color = 'var(--color-main-inverted)',
+	...props
+}) => (
+	<svg
+		width='18'
+		height='18'
+		viewBox='0 0 18 18'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<path
+			d='M12.75 7.25025C12.75 6.71975 12.5393 6.21098 12.1641 5.83586C11.789 5.46074 11.2802 5.25 10.7498 5.25H4.25025C3.98757 5.25 3.72747 5.30174 3.48479 5.40226C3.24211 5.50278 3.0216 5.65012 2.83586 5.83586C2.65012 6.0216 2.50278 6.24211 2.40226 6.48479C2.30174 6.72747 2.25 6.98757 2.25 7.25025V13.7498C2.25 14.0124 2.30174 14.2725 2.40226 14.5152C2.50278 14.7579 2.65012 14.9784 2.83586 15.1641C3.0216 15.3499 3.24211 15.4972 3.48479 15.5977C3.72747 15.6983 3.98757 15.75 4.25025 15.75H10.7498C11.0124 15.75 11.2725 15.6983 11.5152 15.5977C11.7579 15.4972 11.9784 15.3499 12.1641 15.1641C12.3499 14.9784 12.4972 14.7579 12.5977 14.5152C12.6983 14.2725 12.75 14.0124 12.75 13.7498V7.25025Z'
+			stroke={color}
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M14.991 12.5527C15.221 12.4216 15.4123 12.2321 15.5456 12.0034C15.6788 11.7746 15.7494 11.5147 15.75 11.25V3.75C15.75 2.925 15.075 2.25 14.25 2.25H6.75C6.1875 2.25 5.8815 2.53875 5.625 3'
+			stroke={color}
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);
diff --git a/src/shared/types/product.ts b/src/shared/types/product.ts
@@ -7,7 +7,7 @@ export interface ProductDataProps {
 	title: string;
 	creativity: number;
 	filter: FilterSortProps[];
-	characteristics: Record<string, string>;
+	characteristics: Record<string, string[] | Record<string, string>>;
 	markets: MarketsProductData[];
 }
 

diff --git a/src/shared/ui/Button/Button.module.scss b/src/shared/ui/Button/Button.module.scss
@@ -32,6 +32,7 @@
 	img,
 	svg {
 		opacity: .5;
+		transition: all .2s ease !important;
 	}
 
 	&:hover {