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 && (