First public commit

components/cookie-consent.tsx

@@ -0,0 +1,49 @@
+import { Transition } from "@headlessui/react";
+import Cookies from "js-cookie";
+import Link from "next/link";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { getPortal } from "utils/selectors";
+import CookiesIllustration from "./cookie-consent/cookies.svg";
+
+const CookieConsentPopover: React.VoidFunctionComponent = () => {
+  const [visible, setVisible] = React.useState(true);
+
+  return ReactDOM.createPortal(
+    <Transition
+      show={visible}
+      appear={true}
+      as="div"
+      enter="transition transform delay-1000 duration-1000"
+      enterFrom="opacity-0 translate-y-8"
+      enterTo="opacity-100 translate-y-0"
+      leave="duration-200"
+      leaveFrom="opacity-100 translate-y-0"
+      leaveTo="opacity-0 translate-y-8"
+      className="bg-white z-50 p-4 pt-8 shadow-lg fixed rounded-lg w-60 text-sm bottom-8 right-8"
+    >
+      <CookiesIllustration className="absolute -top-6" />
+      <div className="mb-3">
+        Your privacy is important to us. We only use cookies to improve the
+        browsing experience on this website.
+      </div>
+      <div className="flex space-x-6 items-center">
+        <Link href="/privacy-policy">
+          <a className="text-slate-400 hover:text-indigo-500">Privacy Policy</a>
+        </Link>
+        <button
+          onClick={() => {
+            Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
+            setVisible(false);
+          }}
+          className="grow text-white focus:ring-2 focus:ring-indigo-200 transition-all bg-indigo-500 hover:bg-indigo-500/90 active:bg-indigo-600/90  px-5 py-1 font-semibold shadow-sm rounded-md"
+        >
+          OK
+        </button>
+      </div>
+    </Transition>,
+    getPortal(),
+  );
+};
+
+export default CookieConsentPopover;