feat(client): add cookie banner

lareii · Sep 15, 2024 · 1c36c21 · 1c36c21
1 parent 958dfea
commit 1c36c21
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/client/app/(home)/(legal)/privacy/page.jsx b/client/app/(home)/(legal)/privacy/page.jsx
@@ -44,11 +44,10 @@ export default function Page() {
       <div>
         <div className='mt-10 text-lg font-bold'>3. Çerezler</div>
         <div className='text-muted-foreground'>
-          Hizmetimizde kullanıcı deneyimini geliştirmek ve oturum yönetimini
-          sağlamak amacıyla çerezler kullanıyoruz. Çerezler, tarayıcınızda
-          saklanan küçük veri dosyalarıdır. Tarayıcı ayarlarınızdan çerez
-          kullanımını yönetebilir veya devre dışı bırakabilirsiniz; ancak bu,
-          hizmetin bazı özelliklerini sınırlayabilir.
+          Çerezler, tarayıcınızda saklanan küçük veri dosyalarıdır. Hizmetimizde
+          kullanıcı deneyimini geliştirmek ve oturum yönetimini sağlamak
+          amacıyla çerezler kullanıyoruz. Çerezleri kabul etmek istemiyorsanız,
+          siteyi kullanmaya devam etmemelisiniz.
         </div>
       </div>
       <div>

diff --git a/client/app/layout.jsx b/client/app/layout.jsx
@@ -1,5 +1,6 @@
 import { Inter } from 'next/font/google';
 import { Toaster } from '@/components/ui/toaster';
+import Cookie from '@/components/app/Cookie';
 import '@/styles/main.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -19,6 +20,7 @@ export default function RootLayout({ children }) {
       <body className={inter.className}>
         {children}
         <Toaster />
+        <Cookie />
       </body>
     </html>
   );

diff --git a/client/components/app/Cookie/index.jsx b/client/components/app/Cookie/index.jsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useLocalStorage } from 'react-use';
+import { Button } from '@/components/ui/button';
+
+export default function CookieBanner() {
+  const [hasAcceptedCookies, setHasAcceptedCookies] = useLocalStorage(
+    'hasAcceptedCookies',
+    false
+  );
+  const [isCookieBannerVisible, setIsCookieBannerVisible] = useState(false);
+
+  useEffect(() => {
+    if (!hasAcceptedCookies) setIsCookieBannerVisible(true);
+    else setIsCookieBannerVisible(false);
+  }, [hasAcceptedCookies]);
+
+  return (
+    isCookieBannerVisible && (
+      <div className='absolute bottom-0 sticky z-50 w-full bg-zinc-800 border-t border-zinc-700 flex justify-center items-center gap-2 py-2 px-5 text-sm'>
+        🍪 bu site çerezleri kullanır, devam ederek bunu kabul etmiş olursunuz.
+        <Button onClick={() => setHasAcceptedCookies(true)} className='h-8'>
+          anladım
+        </Button>
+      </div>
+    )
+  );
+}