forked from crowetic/commerce
New Text Component, new pages
This commit is contained in:
parent
81f4771c4d
commit
5e8cb6e6df
@ -35,7 +35,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
console.log(displaySidebar, displayDropdown)
|
|
||||||
usePreventScroll({
|
usePreventScroll({
|
||||||
isDisabled: !displaySidebar,
|
isDisabled: !displaySidebar,
|
||||||
})
|
})
|
||||||
|
@ -10,6 +10,21 @@ interface DropdownMenuProps {
|
|||||||
open: boolean
|
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 DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
|
||||||
const { theme, setTheme } = useTheme()
|
const { theme, setTheme } = useTheme()
|
||||||
|
|
||||||
@ -24,39 +39,36 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
|
|||||||
leaveTo="transform opacity-0 scale-95"
|
leaveTo="transform opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Menu.Items className={s.dropdownMenu}>
|
<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>
|
<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>
|
||||||
<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.Item>
|
||||||
</Menu.Items>
|
</Menu.Items>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import s from './UserNav.module.css'
|
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 { Heart, Bag } from '@components/icon'
|
||||||
|
import { Avatar } from '@components/core'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import DropdownMenu from './DropdownMenu'
|
import DropdownMenu from './DropdownMenu'
|
||||||
import { Menu } from '@headlessui/react'
|
import { Menu } from '@headlessui/react'
|
||||||
@ -22,7 +22,6 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
|||||||
const { openSidebar, closeSidebar, displaySidebar } = useUI()
|
const { openSidebar, closeSidebar, displaySidebar } = useUI()
|
||||||
|
|
||||||
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
|
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
|
||||||
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className={cn(s.root, className)}>
|
<nav className={cn(s.root, className)}>
|
||||||
|
7
components/ui/Text/Text.module.css
Normal file
7
components/ui/Text/Text.module.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.body {
|
||||||
|
@apply text-lg leading-7 font-medium max-w-6xl mx-auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
@apply text-5xl mb-12;
|
||||||
|
}
|
54
components/ui/Text/Text.tsx
Normal file
54
components/ui/Text/Text.tsx
Normal file
@ -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
|
1
components/ui/Text/index.ts
Normal file
1
components/ui/Text/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './Text'
|
@ -8,3 +8,4 @@ export { default as Container } from './Container'
|
|||||||
export { default as LoadingDots } from './LoadingDots'
|
export { default as LoadingDots } from './LoadingDots'
|
||||||
export { default as Skeleton } from './Skeleton'
|
export { default as Skeleton } from './Skeleton'
|
||||||
export { default as Modal } from './Modal'
|
export { default as Modal } from './Modal'
|
||||||
|
export { default as Text } from './Text'
|
||||||
|
@ -1 +0,0 @@
|
|||||||
export type Colors = 'violet' | 'black' | 'pink' | 'white'
|
|
13
pages/forgot-password.tsx
Normal file
13
pages/forgot-password.tsx
Normal file
@ -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
|
12
pages/orders.tsx
Normal file
12
pages/orders.tsx
Normal file
@ -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
|
12
pages/profile.tsx
Normal file
12
pages/profile.tsx
Normal file
@ -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
|
Loading…
x
Reference in New Issue
Block a user