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

components/cart/index.ts

@@ -1 +1,2 @@
 export { default as CartSidebarView } from './CartSidebarView'
+export { default as CartItem } from './CartItem'

components/core/I18nWidget/I18nWidget.module.css

@@ -3,7 +3,7 @@
 }
 
 .button {
-  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center;
+  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center outline-none focus:outline-none;
 }
 
 .dropdownMenu {

components/core/Layout/Layout.tsx

@@ -36,7 +36,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     }
   }, [])
 
-  console.log(displaySidebar, displayDropdown)
   usePreventScroll({
     isDisabled: !displaySidebar,
   })

components/core/Searchbar/Searchbar.module.css

@@ -3,10 +3,6 @@
   min-width: 300px;
 }
 
-.input:focus {
-  @apply outline-none shadow-outline-gray;
-}
-
 .iconContainer {
   @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
 }

components/core/UserNav/DropdownMenu.tsx

@@ -10,6 +10,21 @@ interface DropdownMenuProps {
   open: boolean
 }
 
+const LINKS = [
+  {
+    name: 'My Orders',
+    href: '/orders',
+  },
+  {
+    name: 'My Profile',
+    href: '/profile',
+  },
+  {
+    name: 'Cart',
+    href: '/cart',
+  },
+]
+
 const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
   const { theme, setTheme } = useTheme()
 
@@ -24,39 +39,36 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
       leaveTo="transform opacity-0 scale-95"
     >
       <Menu.Items className={s.dropdownMenu}>
+        {LINKS.map(({ name, href }) => (
+          <Link href={href}>
+            <Menu.Item key={href}>
+              {({ active }) => (
+                <a className={cn(s.link, { [s.active]: active })}>{name}</a>
+              )}
+            </Menu.Item>
+          </Link>
+        ))}
         <Menu.Item>
-          {({ active }) => <a className={s.link}>My Purchases</a>}
+          <a
+            className={cn(s.link, 'justify-between')}
+            onClick={() =>
+              theme === 'dark' ? setTheme('light') : setTheme('dark')
+            }
+          >
+            <div>
+              Theme: <strong>{theme}</strong>{' '}
+            </div>
+            <div className="ml-3">
+              {theme == 'dark' ? (
+                <Moon width={20} height={20} />
+              ) : (
+                <Sun width="20" height={20} />
+              )}
+            </div>
+          </a>
         </Menu.Item>
         <Menu.Item>
-          {({ active }) => <a className={s.link}>My Account</a>}
-        </Menu.Item>
-        <Menu.Item>
-          {({ active }) => (
-            <a
-              className={cn(s.link, 'justify-between')}
-              onClick={() =>
-                theme === 'dark' ? setTheme('light') : setTheme('dark')
-              }
-            >
-              <div>
-                Theme: <strong>{theme}</strong>{' '}
-              </div>
-              <div className="ml-3">
-                {theme == 'dark' ? (
-                  <Moon width={20} height={20} />
-                ) : (
-                  <Sun width="20" height={20} />
-                )}
-              </div>
-            </a>
-          )}
-        </Menu.Item>
-        <Menu.Item>
-          {({ active }) => (
-            <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
-              Logout
-            </a>
-          )}
+          <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>Logout</a>
         </Menu.Item>
       </Menu.Items>
     </Transition>

components/core/UserNav/UserNav.module.css

@@ -2,9 +2,6 @@
   @apply relative;
 }
 
-.mainContainer {
-}
-
 .list {
   @apply flex flex-row items-center justify-items-end h-full;
 }
@@ -25,3 +22,11 @@
     @apply outline-none;
   }
 }
+
+.bagCount {
+  @apply border border-accents-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
+}
+
+.avatarButton {
+  @apply inline-flex justify-center rounded-full outline-none focus:outline-none;
+}

components/core/UserNav/UserNav.tsx

@@ -1,9 +1,9 @@
 import Link from 'next/link'
 import cn from 'classnames'
 import s from './UserNav.module.css'
-import { FC, useRef } from 'react'
-import { Avatar } from '@components/core'
+import { FC } from 'react'
 import { Heart, Bag } from '@components/icon'
+import { Avatar } from '@components/core'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
 import { Menu } from '@headlessui/react'
@@ -20,9 +20,7 @@ const countItems = (count: number, items: any[]) =>
 const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
-
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
-  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
 
   return (
     <nav className={cn(s.root, className)}>
@@ -33,11 +31,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
             onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
           >
             <Bag />
-            {itemsCount > 0 && (
-              <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
-                {itemsCount}
-              </span>
-            )}
+            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
           </li>
           <Link href="/wishlist">
             <li className={s.item}>
@@ -46,16 +40,14 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
           </Link>
           <li className={s.item}>
             <Menu>
-              {({ open }) => {
-                return (
-                  <>
-                    <Menu.Button className="inline-flex justify-center rounded-full">
-                      <Avatar />
-                    </Menu.Button>
-                    <DropdownMenu open={open} />
-                  </>
-                )
-              }}
+              {({ open }) => (
+                <>
+                  <Menu.Button className={s.avatarButton}>
+                    <Avatar />
+                  </Menu.Button>
+                  <DropdownMenu open={open} />
+                </>
+              )}
             </Menu>
           </li>
         </ul>

components/product/types.ts

@@ -1 +0,0 @@
-import { Colors } from '@components/ui/types'

components/ui/Modal/Modal.module.css

@@ -6,3 +6,7 @@
 .modal {
   @apply bg-primary p-12 border border-accents-2;
 }
+
+.modal:focus {
+  @apply outline-none;
+}

components/ui/Text/Text.module.css

@@ -0,0 +1,11 @@
+.body {
+  @apply text-lg leading-7 font-medium max-w-6xl mx-auto;
+}
+
+.heading {
+  @apply text-5xl mb-12;
+}
+
+.pageHeading {
+  @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
+}

components/ui/Text/Text.tsx

@@ -0,0 +1,56 @@
+import React, {
+  FunctionComponent,
+  JSXElementConstructor,
+  CSSProperties,
+} from 'react'
+import cn from 'classnames'
+import s from './Text.module.css'
+
+interface Props {
+  variant?: Variant
+  className?: string
+  style?: CSSProperties
+  children: React.ReactNode | any
+}
+
+type Variant = 'heading' | 'body' | 'pageHeading'
+
+const Text: FunctionComponent<Props> = ({
+  style,
+  className = '',
+  variant = 'body',
+  children,
+}) => {
+  const componentsMap: {
+    [P in Variant]: React.ComponentType<any> | string
+  } = {
+    body: 'p',
+    heading: 'h1',
+    pageHeading: 'h1',
+  }
+
+  const Component:
+    | JSXElementConstructor<any>
+    | React.ReactElement<any>
+    | React.ComponentType<any>
+    | string = componentsMap![variant!]
+
+  return (
+    <Component
+      className={cn(
+        s.root,
+        {
+          [s.body]: variant === 'body',
+          [s.heading]: variant === 'heading',
+          [s.pageHeading]: variant === 'pageHeading',
+        },
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export default Text

components/ui/Text/index.ts

@@ -0,0 +1 @@
+export { default } from './Text'

components/ui/index.ts

@@ -8,3 +8,4 @@ export { default as Container } from './Container'
 export { default as LoadingDots } from './LoadingDots'
 export { default as Skeleton } from './Skeleton'
 export { default as Modal } from './Modal'
+export { default as Text } from './Text'

components/ui/types.ts

@@ -1 +0,0 @@
-export type Colors = 'violet' | 'black' | 'pink' | 'white'