feat: add cookie consent banner

.prettierrc

@@ -6,6 +6,6 @@
   "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
   "tabWidth": 2,
-  "trailingComma": "all",
+  "trailingComma": "es5",
   "useTabs": false
 }

src/components/cookie-consent.js

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import WhiteContainer from './white-container';
+
+const Banner = styled(WhiteContainer)`
+  position: fixed;
+  bottom: 20px;
+  left: 15%;
+  right: 15%;
+  z-index: 9999;
+
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: 20px;
+  padding: 30px;
+  align-items: center;
+
+  @media screen and (max-width: 768px) {
+    display: block;
+    left: 10px;
+    right: 10px;
+
+    padding: 20px 25px;
+  }
+`;
+
+const Text = styled.p`
+  margin: 0;
+`;
+
+const Button = styled.button`
+  display: inline-block;
+  padding: 7px 15px;
+
+  color: #3072be;
+
+  border: 0;
+  background: none;
+  cursor: pointer;
+
+  @media screen and (max-width: 768px) {
+    display: block;
+    margin-top: 20px;
+    padding: 7px 0;
+
+    text-align: left;
+  }
+`;
+
+export default function CookieConsent() {
+  const [hasAgreed, setHasAgreed] = useState(
+    localStorage.getItem('cookie-consent') === 'yes'
+  );
+
+  function handleOnClick(event) {
+    event.preventDefault();
+
+    setHasAgreed(true);
+    localStorage.setItem('cookie-consent', 'yes');
+  }
+
+  if (hasAgreed) return null;
+
+  return (
+    <Banner>
+      <Text>
+        This website may store data such as cookies to enable analytics
+        functionalities.
+      </Text>
+      <Button onClick={handleOnClick}>Accept and close</Button>
+    </Banner>
+  );
+}

src/templates/layout.js

@@ -6,6 +6,7 @@ import Footer from '../components/footer';
 import Wrap from '../components/wrap';
 import useSiteSettings from '../hooks/useSiteSettings';
 import SearchForm from '../components/search-form';
+import CookieConsent from '../components/cookie-consent';
 
 const UpperContainer = styled.div`
   margin-bottom: 24px;
@@ -55,6 +56,8 @@ export default function Layout(props) {
         logoDescription={settings.logo.title}
       />
 
+      <CookieConsent />
+
       <Helmet>
         {settings.googleAnalyticsId && (
           <script>