Merge pull request #4 from sarwar-asik/v2

V2

package.json

@@ -14,6 +14,7 @@
     "@reduxjs/toolkit": "^1.9.7",
     "antd": "^5.10.0",
     "axios": "^1.5.1",
+    "js-cookie": "^3.0.5",
     "jwt-decode": "^3.1.2",
     "next": "13.5.4",
     "react": "^18",
@@ -23,6 +24,7 @@
     "vercel": "^32.5.6"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/page.tsx

@@ -23,6 +23,8 @@ import TrustedBy from "@/components/Home/TrustedBy";
 import FAQPage from "@/components/Home/FAQ";
 import GalleryPage from "./(public)/gallery/page";
 import StoryHero from "@/components/Home/StoryHero";
+// import CookieComponent from "@/components/Home/Cookie";
+const CookieComponent = React.lazy(() => import("@/components/Home/Cookie"));
 
 const HomePage = () => {
   const [open, setOpen] = useState(true);
@@ -45,12 +47,13 @@ const HomePage = () => {
         }}
       >
 
+        <CookieComponent />
         {/* //! Float Icon */}
         {/* <FloatButton.Group
           trigger="click"
           type="primary"
           style={{ right: 24 }}
-          icon={<CommentOutlined />}
+          icon={<CommentOutlined style={{}} />}
         >
           <FloatButton icon={<CustomerServiceOutlined />} />
 

src/components/Home/Cookie.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Modal, Button } from 'antd';
+import Cookies from 'js-cookie';
+import dynamic from "next/dynamic";
+
+const CookieComponent = () => {
+    const [visible, setVisible] = useState(!Cookies.get('cookieConsent'));
+
+    const handleAccept = () => {
+        Cookies.set('cookieConsent', 'accepted', { expires: 30 });
+        setVisible(false);
+    };
+
+    const handleDecline = () => {
+        Cookies.set('cookieConsent', 'declined', { expires: 30 });
+        setVisible(false);
+    };
+    if (visible) {
+        return (
+            <div
+                className="fixed inset-x-0 bottom-0 z-50 flex flex-col items-center justify-center bg-black text-white p-4 sm:p-6 lg:p-8">
+                <p className="text-lg md:text-xl text-center mb-4">
+                    We use cookies and other tracking technologies to improve your browsing experience on our website, to show you
+                    personalized content and targeted ads, to analyze our website traffic, and to understand where our visitors are
+                    coming from.
+                </p>
+                <div className="flex flex-col md:flex-row gap-2">
+                    <button onClick={handleDecline} className="bg-white w-full min-w-[200px] hover:bg-teal-700 hover:text-white px-4 py-2 text-sm md:text-base font-semibold rounded-lg mb-2 md:mb-0 cursor-pointer">
+                        I Agree
+                    </button>
+                    <button onClick={handleAccept} className="bg-red-500 w-full min-w-[200px] text-white hover:bg-gray-700 px-4 py-2 text-sm md:text-base font-semibold rounded-lg cursor-pointer">
+                        I Decline
+                    </button>
+                </div>
+                {/* <button className="mt-2 text-sm text-white underline">Change my preferences</button> */}
+            </div>
+        )
+    }
+    return null
+}
+
+
+export default dynamic(() => Promise.resolve(CookieComponent), {
+    ssr: false,
+});

yarn.lock

@@ -456,6 +456,11 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
+"@types/js-cookie@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz"
+  integrity sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==
+
 "@types/json-schema@^7.0.6":
   version "7.0.15"
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
@@ -2590,6 +2595,11 @@ jiti@^1.18.2:
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz"
   integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 "js-tokens@^3.0.0 || ^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"