diff --git a/.prettierrc b/.prettierrc
index 6e9aa11..b5c391e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -6,6 +6,6 @@
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"tabWidth": 2,
- "trailingComma": "all",
+ "trailingComma": "es5",
"useTabs": false
}
diff --git a/src/components/cookie-consent.js b/src/components/cookie-consent.js
new file mode 100644
index 0000000..18173c3
--- /dev/null
+++ b/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 (
+
+
+ This website may store data such as cookies to enable analytics
+ functionalities.
+
+
+
+ );
+}
diff --git a/src/templates/layout.js b/src/templates/layout.js
index 25daf4b..8ba9fe8 100644
--- a/src/templates/layout.js
+++ b/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}
/>
+
+
{settings.googleAnalyticsId && (