4
0
forked from crowetic/commerce

add cookie fixed banner

This commit is contained in:
Franco Arza 2020-10-17 21:18:36 -03:00
parent 526b291f4f
commit 5f1520bcba
2 changed files with 17 additions and 7 deletions

View File

@ -6,11 +6,12 @@ interface Props {
className?: string className?: string
title: string title: string
description: string description: string
action?: React.ReactNode
} }
const Featurebar: FC<Props> = ({ title, description, className }) => { const Featurebar: FC<Props> = ({ title, description, className, action }) => {
const rootClassName = cn( const rootClassName = cn(
'hidden py-2 px-6 bg-accents-1 border-b border-accents-2 text-base text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-accents-1', 'transition-transform transform duration-500 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
className className
) )
return ( return (
@ -18,6 +19,7 @@ const Featurebar: FC<Props> = ({ title, description, className }) => {
<span>{title}</span> <span>{title}</span>
<span className={s.separator} /> <span className={s.separator} />
<span>{description}</span> <span>{description}</span>
{action && action}
</div> </div>
) )
} }

View File

@ -1,9 +1,10 @@
import { FC } from 'react' import { FC, useState } from 'react'
import cn from 'classnames' import cn from 'classnames'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import { CommerceProvider } from '@lib/bigcommerce' import { CommerceProvider } from '@lib/bigcommerce'
import { Navbar, Featurebar, Footer } from '@components/core' import { Navbar, Featurebar, Footer } from '@components/core'
import { Container, Sidebar } from '@components/ui' import { Container, Sidebar } from '@components/ui'
import Button from '@components/ui/Button'
import { CartSidebarView } from '@components/cart' import { CartSidebarView } from '@components/cart'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import s from './Layout.module.css' import s from './Layout.module.css'
@ -16,14 +17,11 @@ interface Props {
const Layout: FC<Props> = ({ children, pageProps }) => { const Layout: FC<Props> = ({ children, pageProps }) => {
const { displaySidebar, closeSidebar } = useUI() const { displaySidebar, closeSidebar } = useUI()
const [acceptedCookies, setAcceptedCookies] = useState(false)
return ( return (
<CommerceProvider locale="en-us"> <CommerceProvider locale="en-us">
<div className={cn(s.root)}> <div className={cn(s.root)}>
<Featurebar
title="Free Standard Shipping on orders over $99.99"
description="Due to COVID-19, some orders may experience processing and delivery delays."
/>
<Container> <Container>
<Navbar /> <Navbar />
</Container> </Container>
@ -32,6 +30,16 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
<Sidebar show={displaySidebar} close={closeSidebar}> <Sidebar show={displaySidebar} close={closeSidebar}>
<CartSidebarView /> <CartSidebarView />
</Sidebar> </Sidebar>
<Featurebar
title="This site uses cookies to improve your experience."
description="By clicking, you agree to our Privacy Policy."
action={
<Button className="mx-5" onClick={() => setAcceptedCookies(true)}>
Accept cookies
</Button>
}
className={cn({ 'translate-y-full': acceptedCookies })}
/>
</div> </div>
</CommerceProvider> </CommerceProvider>
) )