From 61372c6cd5cecc01fc0a681eea9da14d056fab93 Mon Sep 17 00:00:00 2001
From: rikhall1515 <r15.hallberg@gmail.com>
Date: Sun, 21 Apr 2024 21:25:09 +0200
Subject: [PATCH] feat: add cookie component

---
 components/cookies/index.tsx | 49 ++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 components/cookies/index.tsx

diff --git a/components/cookies/index.tsx b/components/cookies/index.tsx
new file mode 100644
index 0000000..6ada1fb
--- /dev/null
+++ 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>
+    </>
+  );
+}