Merge pull request #2 from vhcsilva/BEPRO-1603-introduce-react-cookie…

…-consent-to-landing

Bepro 1603 introduce react cookie consent to landing

components/CookieConsent.tsx

@@ -0,0 +1,14 @@
+import CookieConsentBar from "@/ui/CookieConsentBar";
+
+const CookieConsent = () => {
+  return(
+    <CookieConsentBar
+      buttonText="Accept"
+      cookieName="beproLandingCookieConsent"
+      expires={150}
+      message="This website uses cookies to enhance the user experience."
+    />
+  );
+};
+
+export default CookieConsent;

components/design/CookieConsentBar/index.tsx

@@ -0,0 +1,38 @@
+import CookieConsent from "react-cookie-consent";
+import { CookieConsentBarProps, CookieConsentBtnProps } from "./types";
+import * as Styles from "./styles";
+import { Button } from "@taikai/rocket-kit";
+
+const CookieConsentBar = (props: CookieConsentBarProps) => {
+  const {
+    buttonText,
+    cookieName,
+    expires,
+    message,
+  } = props;
+
+  const Btn = (props: CookieConsentBtnProps) => 
+    <Button 
+      value={buttonText}
+      color="blue500"
+      action={props.onClick}
+      {...props}
+    />;
+
+  return(
+    <Styles.Wrapper>
+      <CookieConsent
+        location="bottom"
+        buttonText={buttonText}
+        cookieName={cookieName}
+        expires={expires}
+        ButtonComponent={Btn}
+        disableStyles
+      >
+        {message}
+      </CookieConsent>
+    </Styles.Wrapper>
+  );
+}
+
+export default CookieConsentBar;

components/design/CookieConsentBar/styles.tsx

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { colors, typography } from "@/styles/variables";;
+
+export const Wrapper = styled.div`
+  .CookieConsent {
+    background-color: ${colors.grey900};
+    border-top: 1px solid ${colors.grey850};
+    font-weight: ${typography.fontWeigthMedium};
+    font-size: ${typography.fontSize};
+    bottom: 0px;
+    align-items: baseline;
+    color: white;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    left: 0px;
+    position: fixed;
+    width: 100%;
+    z-index: 1040;
+    padding: 5px 20px;
+  }
+`;

components/design/CookieConsentBar/types.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+export interface CookieConsentBarProps {
+  buttonText: string;
+  cookieName: string;
+  expires: number;
+  message: string;
+}
+
+export interface CookieConsentBtnProps { 
+  children: ReactNode; 
+  [x: string]: any;
+}