perf: remove changeMenu, perf improe toast, a11y

components/cookies/index.tsx

@@ -1,20 +1,21 @@
+import CookieContextProvider from "@/context/cookie";
 import CookieFormContextProvider from "@/context/cookie/form";
 import { cn } from "@/lib/utils";
 
-import ChangeMenu from "./changeMenu";
 import ManageConsent from "./manage";
 import CookieToast from "./toast";
 
 export default function CookieTray() {
   return (
     <>
-      <div className={cn("transition-all")}>
-        <CookieFormContextProvider>
-          <ManageConsent />
-        </CookieFormContextProvider>
-        <ChangeMenu />
-        <CookieToast />
-      </div>
+      <CookieContextProvider>
+        <div className={cn("transition-all")}>
+          <CookieFormContextProvider>
+            <ManageConsent />
+          </CookieFormContextProvider>
+          <CookieToast />
+        </div>
+      </CookieContextProvider>
     </>
   );
 }

components/cookies/toast/buttons.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { memo } from "react";
+
+import { Button } from "@/components/ui/button";
+import { useCookieAPIContext, useCookieContext } from "@/context/cookie";
+import { useCookieMenuAPIContext } from "@/context/cookie/menu";
+import { setCookie } from "@/lib/cookie/utils";
+
+export const ManageCookies = memo(function ManageCookies() {
+  const { toggleManageConsentMenu } = useCookieMenuAPIContext();
+  const { consent } = useCookieContext();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          toggleManageConsentMenu();
+        }}
+        variant="link"
+        tabIndex={consent ? -1 : 0}
+        aria-label="Manage Cookies"
+      >
+        <span>Manage Cookies</span>
+      </Button>
+    </>
+  );
+});
+
+export const DenyAll = memo(function DenyAll() {
+  const { toggleSelectCookies } = useCookieAPIContext();
+  const { consent } = useCookieContext();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          toggleSelectCookies(true, true, true, true);
+          setCookie("1:000");
+        }}
+        variant="outline"
+        tabIndex={consent ? -1 : 0}
+        aria-label="Deny All"
+      >
+        <span>Deny All</span>
+      </Button>
+    </>
+  );
+});
+
+export const AcceptAll = memo(function AcceptAll() {
+  const { toggleSelectCookies } = useCookieAPIContext();
+  const { consent } = useCookieContext();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          toggleSelectCookies(true, true, true, true);
+          setCookie("1:111");
+        }}
+        tabIndex={consent ? -1 : 0}
+        aria-label="Accept ALl"
+      >
+        <span>Accept All</span>
+      </Button>
+    </>
+  );
+});
+
+export const PrivacyPolicy = memo(function PrivacyPolicy() {
+  const { consent } = useCookieContext();
+  return (
+    <>
+      <a
+        href="/privacy"
+        className="font-bold text-primary transition-all hover:text-foreground"
+        tabIndex={consent ? -1 : 0}
+      >
+        Privacy Policy
+      </a>
+    </>
+  );
+});

components/cookies/toast/index.tsx

@@ -0,0 +1,22 @@
+import { env } from "@/env/client";
+
+import { AcceptAll, DenyAll, ManageCookies, PrivacyPolicy } from "./buttons";
+import Wrapper from "./wrapper";
+
+export default function CookieToast() {
+  return (
+    <>
+      <Wrapper>
+        <p className="max-w-[60ch] leading-[1.3]">
+          {env.NEXT_PUBLIC_SITE_NAME} uses cookies to improve the website and your user experience,
+          read more in the <PrivacyPolicy />.
+        </p>
+        <div className="flex flex-col-reverse items-center gap-6 md:flex-row">
+          <AcceptAll />
+          <DenyAll />
+          <ManageCookies />
+        </div>
+      </Wrapper>
+    </>
+  );
+}

components/cookies/toast/wrapper.tsx

@@ -0,0 +1,32 @@
+"use client";
+import { useEffect, useState } from "react";
+
+import { useCookieContext } from "@/context/cookie";
+import { cn } from "@/lib/utils";
+
+export default function Wrapper({ children }: { children: React.ReactNode }) {
+  const { consent } = useCookieContext();
+  const [initialVisible, setInitialVisible] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setInitialVisible(true);
+    }, 500);
+  });
+  return (
+    <>
+      <div
+        className={cn(
+          "fixed bottom-0 right-0 z-[5] mb-6 flex w-full flex-col gap-3 rounded-l-lg rounded-r-none bg-background px-6 py-3 shadow transition-all md:w-fit",
+          !consent && initialVisible
+            ? "pointer-events-auto opacity-100"
+            : "pointer-events-none opacity-0"
+        )}
+        aria-hidden={consent}
+        role="region"
+        aria-label="Cookie Banner"
+      >
+        {children}
+      </div>
+    </>
+  );
+}