From ec696e7d3ed3d659c39e74caa0c0cab51a63ca03 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Wed, 18 Jun 2025 15:07:43 +0300 Subject: [PATCH] feat: add cookie notice --- src/app/layout.tsx | 2 + src/core/styles/variables.scss | 1 + src/widgets/cookie-notice/index.ts | 1 + src/widgets/cookie-notice/styles.module.scss | 97 ++++++++++++++++++++ src/widgets/cookie-notice/ui.tsx | 49 ++++++++++ src/widgets/index.ts | 1 + 6 files changed, 151 insertions(+) create mode 100644 src/widgets/cookie-notice/index.ts create mode 100644 src/widgets/cookie-notice/styles.module.scss create mode 100644 src/widgets/cookie-notice/ui.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2628c05..716f773 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import '@core/styles/reset.scss'; import '@core/styles/globals.scss'; import { Toaster } from 'react-hot-toast'; import { ModalProvider } from '@core/providers/modal-provider'; +import { CookieNotice } from '@/widgets'; const openSans = Open_Sans({ subsets: ['cyrillic'], @@ -37,6 +38,7 @@ export default function RootLayout({ {children} + ); diff --git a/src/core/styles/variables.scss b/src/core/styles/variables.scss index de38fbb..9c570b1 100644 --- a/src/core/styles/variables.scss +++ b/src/core/styles/variables.scss @@ -18,6 +18,7 @@ $font-semi-bold: 600; $color-white: #FFFFFF; $color-black: #000000; $color-orange: #E96526; +$color-orange-hover: #ea4b05; $color-lightgray: #E4E1E1; $color-darkgray: #999999; $color-text: #333333; diff --git a/src/widgets/cookie-notice/index.ts b/src/widgets/cookie-notice/index.ts new file mode 100644 index 0000000..4176fff --- /dev/null +++ b/src/widgets/cookie-notice/index.ts @@ -0,0 +1 @@ +export { default as CookieNotice } from './ui'; diff --git a/src/widgets/cookie-notice/styles.module.scss b/src/widgets/cookie-notice/styles.module.scss new file mode 100644 index 0000000..8b87c4c --- /dev/null +++ b/src/widgets/cookie-notice/styles.module.scss @@ -0,0 +1,97 @@ +.Cookies { + position: fixed; + z-index: 10; + width: rem(360px); + bottom: rem(10px); + left: 50%; + transform: translateX(-50%); + + background-color: #d6d6d6; + + transition: opacity 0.25s ease-in-out; + border: 1px solid $color-lightgray; + border-radius: 28px; + box-shadow: 2px 2px 2px 2px #CCCCCC; + + @include iftablet { + width: rem(700px); + bottom: rem(20px); + } + @include iflaptop { + width: rem(1000px); + } + @include ifdesktop { + width: rem(1200px); + } +} + +.Container { + display: flex; + flex-direction: column; + gap: rem(20px); + padding: rem(20px); + + @include iftablet { + justify-content: space-between; + flex-direction: row; + align-items: center; + gap: rem(25px); + padding: rem(20px) rem(40px); + } +} + +.Text { + font-family: $font-open-sans; + font-weight: $font-regular; + font-size: rem(16px); + line-height: 130%; + opacity: 0.7; + + @include iftablet { + max-width: rem(350px); + } + + @include iflaptop { + max-width: unset; + } + + @include ifdesktop { + font-size: rem(18px); + } + + a { + color: $color-orange; + + &:hover { + color: $color-orange-hover; + } + } +} + +.ButtonBox { + display: flex; + justify-content: center; + align-items: center; + gap: rem(32px); + + @include iftablet { + flex-direction: column-reverse; + gap: rem(20px); + max-width: max-content; + } + + @include iflaptop { + flex-direction: row; + justify-content: flex-end; + max-width: unset; + } + + @include ifdesktop { + } +} + +.Hide { + opacity: 0; + user-select: none; + pointer-events: none; +} diff --git a/src/widgets/cookie-notice/ui.tsx b/src/widgets/cookie-notice/ui.tsx new file mode 100644 index 0000000..7fd3a28 --- /dev/null +++ b/src/widgets/cookie-notice/ui.tsx @@ -0,0 +1,49 @@ +'use client'; + +import s from './styles.module.scss'; +import { useEffect, useState } from 'react'; +import { Button } from '@shared/ui'; +import { clsx } from 'clsx'; +import Link from 'next/link'; + +export default function CookiesNotice() { + const [seenCookie, setSeenCookie] = useState(true); + const [clicked, setClicked] = useState(false); + + useEffect(() => { + const seenCookie = localStorage.getItem('seen_cookie'); + if (!seenCookie) setSeenCookie(false); + }, []); + + const handleClickAgree = () => { + localStorage.setItem('seen_cookie', 'true'); + setClicked(true); + }; + + const handleClickCancel = () => { + setClicked(true); + }; + + return seenCookie ? null : ( +
+
+ + Мы используем cookie.
Во время посещения этого сайта вы + соглашаетесь с тем, что мы обрабатываем ваши персональные данные с + использованием метрических программ.
+ Подробнее + + +
+ + + +
+
+
+ ); +} diff --git a/src/widgets/index.ts b/src/widgets/index.ts index af29f90..49ca156 100644 --- a/src/widgets/index.ts +++ b/src/widgets/index.ts @@ -5,3 +5,4 @@ export { LicenseSlider } from './license-slider'; export { OfferForm } from './offer-form'; export { OfferRequestForm } from './offer-request'; export { AdvancedPhoneInput } from './advanced-phone-input'; +export { CookieNotice } from './cookie-notice';