New Text Component, new pages

components/core/Layout/Layout.tsx

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

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>}
+          <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>Logout</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>
-          )}
         </Menu.Item>
       </Menu.Items>
     </Transition>

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 { FC } from 'react'
-import { Avatar } from '@components/core'
 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'
@@ -22,7 +22,6 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
   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)}>

components/ui/Text/Text.module.css

@@ -0,0 +1,7 @@
+.body {
+  @apply text-lg leading-7 font-medium max-w-6xl mx-auto;
+}
+
+.heading {
+  @apply text-5xl mb-12;
+}

components/ui/Text/Text.tsx

@@ -0,0 +1,54 @@
+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'
+
+const Text: FunctionComponent<Props> = ({
+  style,
+  className = '',
+  variant = 'body',
+  children,
+}) => {
+  const componentsMap: {
+    [P in Variant]: React.ComponentType<any> | string
+  } = {
+    body: 'p',
+    heading: 'h2',
+  }
+
+  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',
+        },
+        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'

pages/forgot-password.tsx

@@ -0,0 +1,13 @@
+import { Layout } from '@components/core'
+import { Container } from '@components/ui'
+
+export default function ForgotPassword() {
+  return (
+    <Container>
+      <h2>Forgot Password</h2>
+      <p></p>
+    </Container>
+  )
+}
+
+ForgotPassword.Layout = Layout

pages/orders.tsx

@@ -0,0 +1,12 @@
+import { Layout } from '@components/core'
+import { Container } from '@components/ui'
+
+export default function Orders() {
+  return (
+    <Container>
+      <h2>My Orders</h2>
+    </Container>
+  )
+}
+
+Orders.Layout = Layout

pages/profile.tsx

@@ -0,0 +1,12 @@
+import { Layout } from '@components/core'
+import { Container } from '@components/ui'
+
+export default function Profile() {
+  return (
+    <Container>
+      <h2>My Profile</h2>
+    </Container>
+  )
+}
+
+Profile.Layout = Layout