mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-07-27 12:42:28 +02:00
added the cookiebar
This commit is contained in:
47
src/components/Cookiebar/CookieBar.module.scss
Normal file
47
src/components/Cookiebar/CookieBar.module.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
@import "../../assets/scss/variables";
|
||||
|
||||
$shadow: 0px -1px 5px rgba(50, 50, 50, 0.75);
|
||||
|
||||
.cookieBar {
|
||||
align-items: baseline;
|
||||
background: #fff;
|
||||
border-top: 1px solid #808080;
|
||||
bottom: 0px;
|
||||
|
||||
-webkit-box-shadow: $shadow;
|
||||
-moz-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
left: 0px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 0 300px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #fff;
|
||||
border: 1px solid $color-gray-border;
|
||||
border-radius: $button-border-radius;
|
||||
color: $color-base;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
font-size: $typographic-base-font-size;
|
||||
font-weight: normal;
|
||||
height: $button-height;
|
||||
margin: 15px;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
19
src/components/Cookiebar/CookieBar.tsx
Normal file
19
src/components/Cookiebar/CookieBar.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Link } from "gatsby";
|
||||
import React from "react";
|
||||
import CookieConsent from "react-cookie-consent";
|
||||
import * as styles from "./CookieBar.module.scss";
|
||||
|
||||
export const CookieBar = () => {
|
||||
return (
|
||||
<CookieConsent
|
||||
disableButtonStyles
|
||||
disableStyles
|
||||
contentClasses={styles.content}
|
||||
containerClasses={styles.cookieBar}
|
||||
buttonClasses={styles.button}
|
||||
>
|
||||
This website uses cookies to enhance the user experience.{" "}
|
||||
<small>Click <Link to="/">here</Link> to learn more about cookies.</small>
|
||||
</CookieConsent>
|
||||
);
|
||||
};
|
@@ -3,6 +3,7 @@ import Helmet from "react-helmet";
|
||||
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
|
||||
import { CookieBar } from "../Cookiebar/CookieBar";
|
||||
import * as styles from "./Layout.module.scss";
|
||||
|
||||
interface Props {
|
||||
@@ -35,6 +36,7 @@ const Layout: React.FC<Props> = ({
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta name="twitter:image" content={metaImageUrl} />
|
||||
</Helmet>
|
||||
<CookieBar />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
Reference in New Issue
Block a user