Merge branch 'master' of https://github.com/okbel/e-comm-example

components/core/Featurebar/Featurebar.tsx

@@ -6,11 +6,20 @@ interface Props {
   className?: string
   title: string
   description: string
+  hide?: boolean
+  action?: React.ReactNode
 }
 
-const Featurebar: FC<Props> = ({ title, description, className }) => {
+const Featurebar: FC<Props> = ({
+  title,
+  description,
+  className,
+  action,
+  hide,
+}) => {
   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',
+    { 'translate-y-full': hide },
     className
   )
   return (
@@ -18,6 +27,7 @@ const Featurebar: FC<Props> = ({ title, description, className }) => {
       <span>{title}</span>
       <span className={s.separator} />
       <span>{description}</span>
+      {action && action}
     </div>
   )
 }

components/core/Layout/Layout.tsx

@@ -1,9 +1,10 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import cn from 'classnames'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import { CommerceProvider } from '@lib/bigcommerce'
 import { Navbar, Featurebar, Footer } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
+import Button from '@components/ui/Button'
 import { CartSidebarView } from '@components/cart'
 import { useUI } from '@components/ui/context'
 import s from './Layout.module.css'
@@ -16,14 +17,11 @@ interface Props {
 
 const Layout: FC<Props> = ({ children, pageProps }) => {
   const { displaySidebar, closeSidebar } = useUI()
+  const [acceptedCookies, setAcceptedCookies] = useState(false)
 
   return (
     <CommerceProvider locale="en-us">
       <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>
           <Navbar />
         </Container>
@@ -32,6 +30,16 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <Sidebar show={displaySidebar} close={closeSidebar}>
           <CartSidebarView />
         </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>
     </CommerceProvider>
   )