diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 622001e8d..f769a4fe1 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -1,8 +1,9 @@ +import { ChangeEvent, useEffect, useState } from 'react' +import Image from 'next/image' import { Trash, Plus, Minus } from '@components/icon' import usePrice from '@lib/bigcommerce/use-price' import useUpdateItem from '@lib/bigcommerce/cart/use-update-item' import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item' -import { ChangeEvent, useEffect, useState } from 'react' import s from './CartItem.module.css' const CartItem = ({ @@ -56,7 +57,13 @@ const CartItem = ({ return (
  • - +
    {item.name} diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css new file mode 100644 index 000000000..eb1fedf10 --- /dev/null +++ b/components/core/Featurebar/Featurebar.module.css @@ -0,0 +1,3 @@ +.root { + @apply text-center p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30; +} diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index 22d637113..6d5b88a0f 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -1,6 +1,8 @@ import cn from 'classnames' import { FC } from 'react' +import s from './Featurebar.module.css' + interface Props { className?: string title: string @@ -17,8 +19,10 @@ const Featurebar: FC = ({ hide, }) => { const rootClassName = cn( - 'transition-transform transform duration-500 text-center ease-out p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', - { 'translate-y-full': hide }, + s.root, + { + 'transition-transform transform duration-500 ease-out translate-y-full': hide, + }, className ) return ( diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index ed5bd469b..2ed351c75 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -1,11 +1,11 @@ import { FC } from 'react' import cn from 'classnames' import Link from 'next/link' -import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import getSlug from '@utils/get-slug' +import { Github } from '@components/icon' import { Logo, Container } from '@components/ui' -import { Github, DoubleChevron } from '@components/icon' - +import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' +import { I18nWidget } from '@components/core' interface Props { className?: string children?: any @@ -82,13 +82,7 @@ const Footer: FC = ({ className, pages }) => {
    -
    - - English - - - -
    +
    diff --git a/components/core/I18nWidget/I18nWidget.module.css b/components/core/I18nWidget/I18nWidget.module.css new file mode 100644 index 000000000..e9986cd32 --- /dev/null +++ b/components/core/I18nWidget/I18nWidget.module.css @@ -0,0 +1,23 @@ +.root { + @apply relative; +} + +.button { + @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center; +} + +.dropdownMenu { + @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full; + + @screen lg { + @apply absolute border border-accents-1 shadow-lg w-56 h-auto; + } +} + +.item { + @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center; + text-transform: capitalize; +} + +.item.active { +} diff --git a/components/core/I18nWidget/I18nWidget.tsx b/components/core/I18nWidget/I18nWidget.tsx new file mode 100644 index 000000000..77d33e539 --- /dev/null +++ b/components/core/I18nWidget/I18nWidget.tsx @@ -0,0 +1,38 @@ +import { FC } from 'react' +import s from './I18nWidget.module.css' +import { Menu } from '@headlessui/react' +import { DoubleChevron } from '@components/icon' +import cn from 'classnames' + +const I18nWidget: FC = () => { + return ( + + ) +} + +export default I18nWidget diff --git a/components/core/I18nWidget/index.ts b/components/core/I18nWidget/index.ts new file mode 100644 index 000000000..46525c3d4 --- /dev/null +++ b/components/core/I18nWidget/index.ts @@ -0,0 +1 @@ +export { default } from './I18nWidget' diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index eec034267..d3d77bd5b 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -8,7 +8,7 @@ import Button from '@components/ui/Button' import { CartSidebarView } from '@components/cart' import { useUI } from '@components/ui/context' import s from './Layout.module.css' - +import { usePreventScroll } from '@react-aria/overlays' interface Props { pageProps: { pages?: Page[] @@ -16,10 +16,11 @@ interface Props { } const Layout: FC = ({ children, pageProps }) => { - const { displaySidebar, closeSidebar } = useUI() + const { displaySidebar, displayDropdown, closeSidebar } = useUI() const [acceptedCookies, setAcceptedCookies] = useState(false) const [hasScrolled, setHasScrolled] = useState(false) + // TODO: Update code, add throttle and more. useEffect(() => { const offset = 0 function handleScroll() { @@ -34,6 +35,11 @@ const Layout: FC = ({ children, pageProps }) => { } }, []) + console.log(displaySidebar, displayDropdown) + usePreventScroll({ + isDisabled: !displaySidebar, + }) + return (
    @@ -49,9 +55,11 @@ const Layout: FC = ({ children, pageProps }) => {
    {children}