feat: add cookie component

Adds a cookie component from react-cookie
rikhall1515 · Apr 21, 2024 · d4a67a2 · d4a67a2
2 parents 1f642d0 + 61372c6
commit d4a67a2
Showing 1 changed file with 49 additions and 0 deletions.
diff --git a/components/cookies/index.tsx b/components/cookies/index.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { CookieConsent } from "react-cookie-consent";
+
+import { useCookieContext } from "@/context/cookie";
+
+export default function CookieBanner() {
+  const consent = useCookieContext();
+
+  return consent.hasConsentValue ? (
+    <></>
+  ) : (
+    <>
+      <CookieConsent
+        enableDeclineButton
+        sameSite="strict"
+        flipButtons
+        cookieName="giftistguide_consent"
+        buttonText="Accept all"
+        declineButtonText="Decline all"
+        onAccept={() => {
+          consent.setHasConsentValue(true);
+        }}
+        onDecline={() => {
+          consent.setHasConsentValue(true);
+        }}
+        style={{
+          background: "hsl(var(--popover))",
+          color: "hsl(var(--popover-foreground))",
+          borderTop: "1px hsl(var(--border))",
+        }}
+        buttonStyle={{
+          background: "hsl(var(--primary))",
+          color: "white",
+          borderRadius: "0.35rem",
+        }}
+        declineButtonStyle={{
+          border: "1px hsl(var(--ring))",
+          background: "hsl(var(--secondary))",
+          color: "hsl(var(--secondary-foreground))",
+        }}
+        buttonClasses=""
+        declineButtonClasses=""
+      >
+        This website uses cookies to enhance the user experience.
+      </CookieConsent>
+    </>
+  );
+}