Cookies

import { IconCookie } from '@tabler/icons-react';
import { Card, CardBody } from '@/components/ui/Card';
import Button from '@/components/ui/Button';
export default function CookieBanner() {
  return (
    <div className="h-screen">
      <Card className="ring-neutral/50 absolute bottom-4 left-1/2 w-[96%] -translate-x-1/2 ring-5 md:w-[72%] md:rounded-full">
        <CardBody className="flex flex-col items-center md:flex-row md:justify-between">
          <div className="mb-4 flex items-center gap-2 md:mb-0">
            <IconCookie size={30} />
            <p>We use cookies to enhance the experience.</p>
          </div>
          <div className="flex items-center gap-3">
            <p className="cursor-progress underline underline-offset-2">Cookie settings</p>
            <Button colors="neutral" pill variant="light">
              Reject all
            </Button>
            <Button colors="warning" pill>
              Accept all
            </Button>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

import Button from '@/components/ui/Button';
import { Dialog, DialogClose } from '@/components/ui/Dialog';
import Divider from '@/components/ui/Divider';
import { Checkbox } from '@/components/ui/Checkbox';
export default function CookieDialog() {
  return (
    <div className="relative flex h-screen items-center justify-center">
      <Dialog
        hideCloseButton
        trigger={<Button>Open Cookie Dialog</Button>}
        title="We use cookies!"
        footer={
          <div className="mt-6 flex flex-col gap-2 px-4">
            <DialogClose>
              <Button>ACCEPT ALL</Button>
            </DialogClose>
            <DialogClose>
              <Button variant="light" colors="neutral" className="text-sm">
                Only Selected cookies
              </Button>
            </DialogClose>
          </div>
        }>
        <div className="py-4 text-sm leading-5">
          To provide the best experience on our website, we use cookies and similar technologies. Cookies help us understand how you interact with our site, improve performance, and personalize
          content. you consent to our use of cookies in accordance with our <span className="text-primary cursor-pointer underline underline-offset-2">Cookie Policy</span>
        </div>
        <Divider />
        <div>
          <p className="mb-6 font-semibold">Cookie settings</p>
          <div className="space-y-4">
            <Checkbox id="required" defaultChecked disabled value="required">
              <p className="font-semibold">Essential</p>
              <p className="text-description text-sm">Necessary for website functionality. These cannot be disabled.</p>
            </Checkbox>
            <Checkbox id="analysis" value="analysis">
              <p className="font-semibold">Performance & Analytics</p>
              <p className="text-description text-sm">Help us improve the site by collecting anonymous data</p>
            </Checkbox>
            <Checkbox id="marketing" value="marketing">
              <p className="font-semibold">Marketing & Personalization</p>
              <p className="text-description text-sm">Used for targeted ads and content recommendations based on your interests.</p>
            </Checkbox>
          </div>
        </div>
      </Dialog>
    </div>
  );
}