forked from crowetic/commerce
add cookie fixed banner
This commit is contained in:
parent
526b291f4f
commit
5f1520bcba
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user