Cookies

import { Cookie, X } from "@mynaui/icons-react";

export default function Basic() {
  return (
    <div className="flex gap-4 rounded-full bg-background p-2 text-sm font-medium shadow-sm ring-1 ring-border">
      <div className="flex items-center gap-2">
        <Cookie className="size-5 shrink-0 text-muted-foreground" />
        <span>This website uses cookies.</span>
      </div>
      <a
        href="#"
        className="flex size-5 items-center justify-center rounded-full bg-muted"
      >
        <X className="size-3 shrink-0 stroke-2" />
      </a>
    </div>
  );
}

import { buttonVariants } from "@/components/ui/button";
import { Cookie } from "@mynaui/icons-react";

export default function Simple() {
  return (
    <div className="flex w-full flex-col gap-3 rounded bg-background p-2 text-sm font-medium shadow-sm ring-1 ring-border sm:max-w-xl sm:flex-row sm:justify-between md:items-center">
      <div className="flex items-center gap-2">
        <Cookie className="size-5 shrink-0 text-muted-foreground" />
        <span>We use cookies to enhance your experience.</span>
      </div>
      <div className="ml-7 flex shrink-0 flex-row-reverse items-center justify-end gap-1 sm:ml-0 sm:flex-row">
        <a href="#" className={buttonVariants({ variant: "ghost" })}>
          Ignore
        </a>
        <a href="#" className={buttonVariants({ variant: "default" })}>
          Accept
        </a>
      </div>
    </div>
  );
}

import { Cookie, X } from "@mynaui/icons-react";

export default function WithClose() {
  return (
    <div className="flex w-full flex-row gap-3 rounded-sm bg-background p-2 text-sm font-medium shadow-sm ring-1 ring-border sm:max-w-4xl sm:justify-between md:items-center">
      <div className="flex items-center gap-2">
        <Cookie className="size-5 shrink-0 text-muted-foreground" />
        <span>
          By continuing to use this site you consent to the use of cookies in
          accordance with our{" "}
          <a href="#" className="underline">
            cookie policy
          </a>
          .
        </span>
      </div>
      <a
        href="#"
        className="flex size-5 shrink-0 items-center justify-center rounded-full bg-muted"
      >
        <X className="size-3 shrink-0 stroke-2" />
      </a>
    </div>
  );
}

import { buttonVariants } from "@/components/ui/button";
import { Cookie } from "@mynaui/icons-react";

export default function CardLayout() {
  return (
    <div className="flex w-full flex-col gap-4 rounded bg-background p-4 text-sm shadow-sm ring-1 ring-border sm:w-96">
      <Cookie className="size-8 text-blue-600" />
      <div className="space-y-1">
        <p className="font-medium">Your Data, Your Choice</p>
        <p className="text-muted-foreground">
          We use cookies to improve our services. Click &apos;Accept All&apos;
          to continue or &apos;Customize&apos; to manage your preferences.
        </p>
      </div>
      <div className="flex gap-3">
        <a href="#" className={buttonVariants({ variant: "default" })}>
          Accept All
        </a>
        <a href="#" className={buttonVariants({ variant: "outline" })}>
          Customize
        </a>
      </div>
    </div>
  );
}

import { buttonVariants } from "@/components/ui/button";

export default function FullWidth() {
  return (
    <div className="flex w-full items-center justify-between gap-6 border-t-2 bg-muted p-3 text-sm sm:px-6">
      <span>
        By continuing to browse, you accept the use of cookies. To learn more
        about the use of cookies and our approach to data privacy,{" "}
        <a href="#" className="underline">
          click here
        </a>
        .
      </span>
      <a href="#" className={buttonVariants({ variant: "default" })}>
        Accept
      </a>
    </div>
  );
}