diff --git a/src/components/BannerRedirect/BannerRedirect.js b/src/components/BannerRedirect/BannerRedirect.js new file mode 100644 index 00000000..9203ff4e --- /dev/null +++ b/src/components/BannerRedirect/BannerRedirect.js @@ -0,0 +1,71 @@ +import React, { useState, useEffect } from 'react'; +import './BannerRedirect.scss'; +import { MdClose } from "react-icons/md"; + +function BannerRedirect() { + const [isOpen, setIsOpen] = useState(true); + + const WEBSITES = Object.freeze({ + ES: 'https://es.bitlogic.io', + EN: 'https://en.bitlogic.io', + }); + + const titleEs = `¿Te gustaría visitar nuestro sitio en español?`; + const titleEn = `Would you like to visit our English site?`; + + const closeBanner = () => { + setIsOpen(false); + + if (typeof window !== 'undefined') { + localStorage.setItem('BannerRedirect', 'closed') + } + }; + + const userLanguage = navigator?.language; + const userLocation = typeof window !== 'undefined' ? window?.location?.origin : '' + + useEffect(() => { + if ( + (userLanguage?.startsWith('es') && userLocation?.includes('es')) || + (userLanguage?.startsWith('en') && userLocation?.includes('en')) + ) { + closeBanner() + } + }, [userLanguage, userLocation]); + + const bannerStorage = typeof window !== 'undefined' + ? localStorage.getItem('BannerRedirect') + : undefined + + if (bannerStorage === 'closed' || !isOpen) return null; + + return ( +
+
+
+
{userLanguage?.startsWith('es') + ? titleEs + : titleEn} +
+ +
+ +
+
+ ); +} + +export default BannerRedirect; \ No newline at end of file diff --git a/src/components/BannerRedirect/BannerRedirect.scss b/src/components/BannerRedirect/BannerRedirect.scss new file mode 100644 index 00000000..9df6ce46 --- /dev/null +++ b/src/components/BannerRedirect/BannerRedirect.scss @@ -0,0 +1,73 @@ +@import '../../styles/global.scss'; + +.BannerRedirect { + background-color: $nav-footer-container; + position: fixed; + bottom: 0px; + left: 50%; + transform: translateX(-50%); + width: 100%; + height: max-content; + border-radius: 12px; + z-index: 9999; + border: 2px solid #8f8e8e93; + box-shadow: rgba(0, 0, 0, 0.624) 0px 0px 16px 3px; + animation: show-banner 0.5s ease-in-out; + + &__wrapper { + width: 100%; + height: 100%; + padding: 16px 1px; + color: $primary; + + &>div { + gap: 16px; + color: $white; + margin-bottom: 16px; + justify-content: space-between; + + h6 { + margin: 0; + text-wrap: pretty; + } + + button { + color: $grey-light; + border: none; + align-self: self-start; + background-color: transparent; + padding: 3px; + transition: all .3s ease-in-out; + border-radius: 50%; + + &:hover { + background-color: $grey; + } + } + } + + &__btn { + @include primaryBtn; + color: $primary-invert; + background-color: $secondary; + } + } + + @media (min-width: $breakpoint-lg) { + transform: none; + left: auto; + max-width: 350px; + right: 15%; + top: 0px; + } +} + +@keyframes show-banner { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/src/components/layout.js b/src/components/layout.js index a7bbfbc6..5bdb8446 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -5,6 +5,7 @@ import Footer from "./Footer/Footer" import ScriptTag from "react-script-tag" import useGlobalConfig from "../hooks/useGlobalConfig" import ThemeProvider from "../context/themeContext" +import BannerRedirect from "./BannerRedirect/BannerRedirect" const Layout = ({ children, options = {}, location }) => { const defaultOptions = { @@ -42,7 +43,7 @@ const Layout = ({ children, options = {}, location }) => { {scripts} {options.hasHeader &&
} - +
{children}
{options.hasFooter &&