Cookies

import React from "react";

import { Button, Grid, Space, theme, Typography } from "antd";

import { CheckOutlined, CloseOutlined } from "@ant-design/icons";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Link } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    content: {
      display: "flex",
      flexDirection: screens.sm ? "row" : "column",
      gap: token.margin,
      gap: token.margin,
      justifyContent: "space-between",
      width: "100%"
    },
    panel: {
      backgroundColor: token.colorBgContainer,
      bottom: "0%",
      boxShadow: token.boxShadow,
      left: "0%",
      padding: token.paddingLG,
      position: "fixed",
      right: "0%",
      zIndex: 999
    },
    text: {
      color: token.colorTextSecondary
    },
    textWrapper: {
      display: "flex",
      flexDirection: "column",
      gap: token.marginXXS
    }
  };

  return (
    <section>
        <div style={styles.panel}>
          <div style={styles.content}>
            <div style={styles.textWrapper}>
              <Text strong>
                Cookie consent
              </Text>
              <Text style={styles.text}>
              This site uses <Link underline>cookies</Link> to provide you with a personalized browsing experience. Adjust your settings by selecting '<Text strong>Accept</Text>' or '<Text strong>Deny</Text>'.
              </Text>
            </div>
            <Space>
              <Button icon={<CloseOutlined />}>Deny</Button>
              <Button type="primary" icon={<CheckOutlined />}>Accept</Button>
            </Space>
          </div>
        </div>
    </section>
  );
}

import React, { useState } from "react";

import { Button, FloatButton, Form, Grid, Modal, Switch, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Link } = Typography;

const onChange = (checked) => {
  console.log(`switch to ${checked}`);
};

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const styles = {
    content: {
      display: "flex",
      flexDirection: screens.sm ? "row" : "column",
      gap: token.margin,
      gap: token.margin,
      justifyContent: "space-between",
      width: "100%"
    },
    formItem: {
      margin: 0
    },
    option: {
      borderBottom: `${token.lineWidth}px solid ${token.colorSplit}`,
      display: "flex",
      justifyContent: "space-between",
      padding: `${token.padding}px 0`
    },
    panel: {
      backgroundColor: token.colorBgContainer,
      bottom: "0%",
      boxShadow: token.boxShadow,
      left: "0%",
      padding: token.paddingLG,
      position: "fixed",
      right: "0%",
      zIndex: 999
    },
    text: {
      color: token.colorTextSecondary
    }
  };

  return (
    <>
      <FloatButton
        icon={
          <svg
            width="20"
            height="21"
            viewBox="0 0 24 24"
            fill={token.colorIcon}
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M18.149 2C18.7254 2 19.1935 2.46812 19.1935 3.04455C19.1935 3.62097 18.7254 4.0891 18.149 4.0891C17.5725 4.0891 17.1044 3.62097 17.1044 3.04455C17.1062 2.46812 17.5725 2 18.149 2ZM18.4284 11.097C19.3298 12.442 20.4704 12.8542 21.9516 11.9442C22.0005 12.4507 22.0127 12.9677 21.9865 13.4918C21.6948 19.2839 16.7638 23.7434 10.9716 23.4517C5.18123 23.1582 0.721829 18.2272 1.01353 12.4367C1.30349 6.64457 6.40569 2.13625 12.1961 2.42795C11.6826 4.03495 12.1175 5.46203 13.4241 5.94762C12.2398 9.75201 14.8843 12.2411 18.4284 11.097ZM6.24499 10.3476C7.11312 10.3476 7.8153 11.0516 7.8153 11.918C7.8153 12.7843 7.11137 13.4883 6.24499 13.4883C5.37687 13.4883 4.67468 12.7843 4.67468 11.918C4.67468 11.0516 5.37861 10.3476 6.24499 10.3476ZM11.1917 12.3494C11.6913 12.3494 12.0965 12.7546 12.0965 13.2542C12.0965 13.7538 11.6913 14.159 11.1917 14.159C10.6922 14.159 10.2869 13.7538 10.2869 13.2542C10.2852 12.7546 10.6904 12.3494 11.1917 12.3494ZM7.26508 16.0769C7.87469 16.0769 8.36902 16.5713 8.36902 17.1809C8.36902 17.7905 7.87469 18.2848 7.26508 18.2848C6.65547 18.2848 6.16115 17.7905 6.16115 17.1809C6.16115 16.5695 6.65547 16.0769 7.26508 16.0769ZM9.64413 7.62973C10.1227 7.62973 10.5088 8.0175 10.5088 8.49436C10.5088 8.97297 10.121 9.35899 9.64413 9.35899C9.16553 9.35899 8.7795 8.97122 8.7795 8.49436C8.7795 8.0175 9.16727 7.62973 9.64413 7.62973ZM14.3428 16.463C15.1446 16.463 15.7926 17.1128 15.7926 17.9128C15.7926 18.7145 15.1428 19.3625 14.3428 19.3625C13.5411 19.3625 12.893 18.7128 12.893 17.9128C12.893 17.1128 13.5428 16.463 14.3428 16.463ZM17.3961 6.03496C17.9341 6.03496 18.3708 6.47164 18.3708 7.00964C18.3708 7.54763 17.9341 7.98431 17.3961 7.98431C16.8581 7.98431 16.4214 7.54763 16.4214 7.00964C16.4214 6.47164 16.8581 6.03496 17.3961 6.03496Z"
              fill={token.colorText}
            />
          </svg>
        }
        onClick={showModal}
      />
      <Modal
        title="Privacy Preferences"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={[
          <Button onClick={handleCancel}>Reject all cookies</Button>,
          <Button type="primary" onClick={handleOk}>
            Save
          </Button>,
        ]}
      >
        <Text style={styles.text}>
        Your privacy is important to us. By enabling certain types of <Link underline>cookies</Link>, you can enjoy a tailored browsing experience. Please review and adjust your preferences below.
        </Text>
        <Form>
          <Form.Item style={styles.formItem}>
            <div style={styles.option}>
              <Text strong>Essential cookies {`(required)`}</Text>
              <Switch defaultChecked disabled onChange={onChange} />
            </div>
          </Form.Item>
          <Form.Item style={styles.formItem}>
            <div style={styles.option}>
              <Text strong>Marketing cookies</Text>
              <Switch onChange={onChange} />
            </div>
          </Form.Item>
          <Form.Item style={styles.formItem}>
            <div style={styles.option}>
              <Text strong>Personalization cookies</Text>
              <Switch onChange={onChange} />
            </div>
          </Form.Item>
          <Form.Item style={styles.formItem}>
            <div style={styles.option}>
              <Text strong>Analitics cookies</Text>
              <Switch onChange={onChange} />
            </div>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}