aleksandrvasilev/graffestate.ae-new
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Cookies popup upd

Browse Source
This commit is contained in:
C4rnivore
2025-07-23 10:57:44 +05:00
parent 92175de0c1
commit 69ed9c0506
5 changed files with 78 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/img/components/popups/cookies.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

src/app/layout.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import Script from "next/script";
import "./globals.css";
import { QueryProvider } from "@/lib/QueryProvider";
import { LenisProvider } from "@/lib/LenisProvider";
import PopupModal from "@/components/modals/PopupModal";
import CookiesPopup from "@/components/CookiesPopup";
import LocaleLayout from "./[locale]/layout";
export const metadata: Metadata = {
@@ -49,7 +49,7 @@ export default function RootLayout({
<QueryProvider>
<LenisProvider>
<LocaleLayout>
<PopupModal />
<CookiesPopup />
{children}
<ModalContainer />
</LocaleLayout>
src/components/CookiesPopup.tsx
+71
View File
@@ -0,0 +1,71 @@
"use client";
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @next/next/no-img-element */
import { useEffect } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import { usePopupStore } from "@/stores/usePopupStore";
import { Button } from "@/ui/Button";
function CookiesPopup() {
const { isShowCookiesPopup, setIsShowCookiesPopup } = usePopupStore();
function handlePopupClick() {
setIsShowCookiesPopup(false);
}
useEffect(() => {
if (isShowCookiesPopup === undefined) {
const timeout = setTimeout(() => {
setIsShowCookiesPopup(true);
}, 500);
return () => clearTimeout(timeout);
}
}, []);
return (
<>
{isShowCookiesPopup && (
<motion.div
animate={{ y: -40 }}
className="fixed bottom-0 md:left-10 left-[calc((100vw-350px)/2)] z-30 w-[350px] lg:w-[23.611vw] p-px lg:p-[0.069vw] rounded-2xl"
>
<div className="bg-[#37393B]/60 rounded-2xl p-4 flex flex-col gap-5 backdrop-blur-sm">
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<img
src="/img/components/popups/cookies.png"
alt="popup"
className="lg:w-[2.222vw] lg:h-[2.222vw] w-8 h-8 object-cover"
/>
<p className="heading2 font-medium">
We use{" "}
<Link
href="/cookies"
className="underline-offset-2 underline"
onClick={handlePopupClick}
>
cookies
</Link>
</p>
</div>
<p className="text1 leading-[135%] w-full">
They help us understand how you interact with our site and make
it more convenient and better.
</p>
</div>
<Button
onClick={handlePopupClick}
className="flex items-center gap-x-1 w-full justify-center btns bg-gradient rounded-xl 2xl:py-[0.556vw] py-2 hover:opacity-80 transition-opacity cursor-pointer"
>
Accept
</Button>
</div>
</motion.div>
)}
</>
);
}
export default CookiesPopup;
src/components/modals/PopupModal.tsx
-66
View File
@@ -1,66 +0,0 @@
"use client";
/* eslint-disable react-hooks/exhaustive-deps */
import CloseIcon from "@/components/icons/CloseIcon";
import TgIcon from "@/components/icons/TgIcon";
import { useEffect } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import { usePopupStore } from "@/stores/usePopupStore";
import { useTranslations } from "next-intl";
function Popup() {
const { isShowPopup, setIsShowPopup } = usePopupStore();
function handlePopupClick() {
setIsShowPopup(false);
}
useEffect(() => {
if (usePopupStore.getState().isShowPopup === undefined) {
const timeout = setTimeout(() => {
setIsShowPopup(true);
}, 10000);
return () => clearTimeout(timeout);
}
}, []);
const t = useTranslations("popup");
return (
<>
{isShowPopup && (
<motion.div
animate={{ y: -40 }}
transition={{ type: "spring" }}
className="fixed bottom-0 sm:left-10 left-1/2 max-md:-translate-x-1/2 z-30 w-[320px] lg:w-[22.222vw] p-px lg:p-[0.069vw] rounded-2xl bg-gradient"
>
<div className="bg-[#14161F] rounded-2xl p-4 flex flex-col gap-y-5 lg:gap-y-10">
<p className="btns font-medium leading-[15.4px]">{t("text")}</p>
<Link
href={"https://t.me/graffestate"}
target="_blank"
onClick={handlePopupClick}
className="flex items-center gap-x-1 w-full justify-center font-semibold btns bg-gradient rounded-full py-2 hover:opacity-80 transition-opacity"
>
<div className="text-white lg:size-[1.667vw] size-4">
<TgIcon />
</div>
{t("link")}
</Link>
<button
className="absolute top-2 right-2 hover:bg-white rounded-full flex p-px hover:bg-opacity-10 group transition-colors"
onClick={handlePopupClick}
>
<div className="text-white lg:size-[1.111vw] size-4 m-auto group-hover:text-black transition-colors">
<CloseIcon />
</div>
</button>
</div>
</motion.div>
)}
</>
);
}
export default Popup;
src/stores/usePopupStore.ts
+5 -6
View File
@@ -2,19 +2,18 @@ import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
interface IPopupStore {
isShowPopup: boolean | undefined;
setIsShowPopup: (isShowPopup: boolean) => void;
isShowCookiesPopup: boolean | undefined;
setIsShowCookiesPopup: (isShowPopup: boolean) => void;
}
export const usePopupStore = create<IPopupStore>()(
devtools(
persist(
set => ({
isShowPopup: undefined,
setIsShowPopup: (isShowPopup: boolean) => set({ isShowPopup }),
isShowCookiesPopup: undefined,
setIsShowCookiesPopup: (isShowCookiesPopup: boolean) => set({ isShowCookiesPopup }),
}),
{
name: 'popup',
},
),
));
);