redrockjs/fire-exam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add cookie notice

Browse Source
This commit is contained in:
Valery Grunenko
2025-06-18 15:07:43 +03:00
parent 48739d4e64
commit ec696e7d3e
6 changed files with 151 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@@ -4,6 +4,7 @@ import '@core/styles/reset.scss';
import '@core/styles/globals.scss'; import '@core/styles/globals.scss';
import { Toaster } from 'react-hot-toast'; import { Toaster } from 'react-hot-toast';
import { ModalProvider } from '@core/providers/modal-provider'; import { ModalProvider } from '@core/providers/modal-provider';
import { CookieNotice } from '@/widgets';
const openSans = Open_Sans({ const openSans = Open_Sans({
subsets: ['cyrillic'], subsets: ['cyrillic'],
@@ -37,6 +38,7 @@ export default function RootLayout({
<body className={`${openSans.variable}`}> <body className={`${openSans.variable}`}>
<ModalProvider>{children}</ModalProvider> <ModalProvider>{children}</ModalProvider>
<Toaster /> <Toaster />
<CookieNotice />
</body> </body>
</html> </html>
); );

1
src/core/styles/variables.scss
View File

@@ -18,6 +18,7 @@ $font-semi-bold: 600;
$color-white: #FFFFFF; $color-white: #FFFFFF;
$color-black: #000000; $color-black: #000000;
$color-orange: #E96526; $color-orange: #E96526;
$color-orange-hover: #ea4b05;
$color-lightgray: #E4E1E1; $color-lightgray: #E4E1E1;
$color-darkgray: #999999; $color-darkgray: #999999;
$color-text: #333333; $color-text: #333333;

1
src/widgets/cookie-notice/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as CookieNotice } from './ui';

97
src/widgets/cookie-notice/styles.module.scss Normal file
View File

@@ -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;
}

49
src/widgets/cookie-notice/ui.tsx Normal file
View File

@@ -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 : (
<div className={clsx(s.Cookies, clicked && s.Hide)}>
<div className={s.Container}>
<span className={s.Text}>
Мы используем cookie. <br /> Во время посещения этого сайта вы
соглашаетесь с тем, что мы обрабатываем ваши персональные данные с
использованием метрических программ. <br />
<Link href={'/cookie'}>Подробнее</Link>
</span>
<div className={s.ButtonBox}>
<Button onClick={handleClickCancel} fullWidth>
Отмена
</Button>
<Button variant={'ghost'} onClick={handleClickAgree} fullWidth>
Согласится
</Button>
</div>
</div>
</div>
);
}

1
src/widgets/index.ts
View File

@@ -5,3 +5,4 @@ export { LicenseSlider } from './license-slider';
export { OfferForm } from './offer-form'; export { OfferForm } from './offer-form';
export { OfferRequestForm } from './offer-request'; export { OfferRequestForm } from './offer-request';
export { AdvancedPhoneInput } from './advanced-phone-input'; export { AdvancedPhoneInput } from './advanced-phone-input';
export { CookieNotice } from './cookie-notice';