feat: assemble manage consent menu

components/cookies/manage/formContent.tsx

@@ -0,0 +1,66 @@
+import type { Control, FieldErrors, UseFormRegister, UseFormSetValue } from "react-hook-form";
+
+import Logo from "@/components/logo";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+import AboutTab from "./about";
+import { AcceptAll, AcceptSelection, DenyAll } from "./buttons";
+import ConsentTab from "./consent";
+import DetailsTab from "./details";
+
+type CookieInputs = {
+  necessary: boolean;
+  preferences: boolean;
+  analytics: boolean;
+  advertising: boolean;
+};
+
+export default function FormContent({
+  control,
+  register,
+  errors,
+  isSubmitting,
+  setValue,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  control: Control<CookieInputs, any>;
+  register: UseFormRegister<CookieInputs>;
+  errors: FieldErrors<CookieInputs>;
+  isSubmitting: boolean;
+  setValue: UseFormSetValue<CookieInputs>;
+}) {
+  return (
+    <>
+      <Logo className="mb-6" />
+      <Tabs
+        defaultValue="Consent"
+        className="flex h-auto w-full flex-col overflow-auto bg-[transparent] py-6 align-baseline"
+      >
+        <TabsList className="mx-auto mb-6">
+          <TabsTrigger value="Consent">Consent</TabsTrigger>
+          <TabsTrigger value="Details">Details</TabsTrigger>
+          <TabsTrigger value="About">About</TabsTrigger>
+        </TabsList>
+        <ConsentTab
+          control={control}
+          errors={errors}
+          isSubmitting={isSubmitting}
+          register={register}
+        />
+        <DetailsTab
+          control={control}
+          errors={errors}
+          isSubmitting={isSubmitting}
+          register={register}
+        />
+        <AboutTab />
+      </Tabs>
+      <div className="relative flex w-full flex-shrink-0 flex-col-reverse gap-6  p-6 md:flex-row md:flex-nowrap">
+        <div className="absolute -top-[4.125rem] left-0 h-16 w-full bg-gradient-to-b from-[transparent] to-background to-50%"></div>
+        <DenyAll setValue={setValue} />
+        <AcceptSelection />
+        <AcceptAll setValue={setValue} />
+      </div>
+    </>
+  );
+}

components/cookies/manage/index.tsx

@@ -0,0 +1,30 @@
+"use client";
+import TabNav from "@/components/cookies/manage/tabNav";
+import { useCookieContext } from "@/context/cookie";
+import { cn } from "@/lib/utils";
+
+export default function ManageConsent() {
+  const cookieStore = useCookieContext();
+  return (
+    <>
+      <div
+        className={cn(
+          "cover bottom-[-100%] left-[-100%] right-[-100%] top-[-100%] m-auto h-[100vh] w-full bg-opacity-50 !bg-no-repeat object-cover backdrop-blur backdrop-brightness-50",
+          "fixed z-40 overflow-hidden bg-black bg-opacity-50",
+          cookieStore.isManageConsentMenuOpen ? "block" : "hidden"
+        )}
+        id="#ManageConsentMenuDialog"
+      >
+        <div
+          className={cn(
+            " flex flex-col items-center rounded-2xl text-foreground",
+            "fixed left-1/2 top-1/2 z-[99] box-border -translate-x-1/2 -translate-y-1/2 overflow-hidden",
+            "h-auto max-h-[calc(100%-16px)] w-[calc(100%-16px)] max-w-[80rem] rounded-2xl bg-background pt-6 shadow transition-all"
+          )}
+        >
+          <TabNav />
+        </div>
+      </div>
+    </>
+  );
+}

components/cookies/manage/tabNav.tsx

@@ -0,0 +1,53 @@
+"use client";
+import type { SubmitHandler } from "react-hook-form";
+import { useForm } from "react-hook-form";
+
+import FormContent from "@/components/cookies/manage/formContent";
+import { useCookieContext } from "@/context/cookie";
+import { setCookie } from "@/lib/cookie/utils";
+
+export type CookieInputs = {
+  necessary: boolean;
+  preferences: boolean;
+  analytics: boolean;
+  advertising: boolean;
+};
+
+export default function TabNav() {
+  const cookieStore = useCookieContext();
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<CookieInputs>({
+    defaultValues: {
+      necessary: true,
+      preferences: cookieStore.preferences,
+      advertising: cookieStore.advertising,
+      analytics: cookieStore.analytics,
+    },
+  });
+  const onSubmit: SubmitHandler<CookieInputs> = (data) => {
+    setCookie(`1:${data.preferences ? 1 : 0}${data.analytics ? 1 : 0}${data.advertising ? 1 : 0}`);
+    cookieStore.toggleSelectCookies(data.preferences, data.analytics, data.advertising, true);
+  };
+  return (
+    <>
+      <form
+        className="flex h-full w-full flex-col items-center overflow-auto bg-[transparent] align-baseline"
+        onSubmit={handleSubmit(onSubmit)}
+        id="cookieForm"
+      >
+        <FormContent
+          control={control}
+          errors={errors}
+          isSubmitting={isSubmitting}
+          register={register}
+          setValue={setValue}
+        />
+      </form>
+    </>
+  );
+}