mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-08-06 09:28:09 +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>
|
||||
);
|
||||
};
|
Reference in New Issue
Block a user