forked from crowetic/commerce
fix conflicts
This commit is contained in:
commit
986cf74517
@ -3,7 +3,6 @@ import { FC } from 'react'
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { Logo } from '@components/ui'
|
import { Logo } from '@components/ui'
|
||||||
import { Searchbar, UserNav } from '@components/core'
|
import { Searchbar, UserNav } from '@components/core'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
29
components/core/UserNav/DropdownMenu.module.css
Normal file
29
components/core/UserNav/DropdownMenu.module.css
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
.dropdownMenu {
|
||||||
|
@apply fixed top-0 right-0 z-20 w-full h-full;
|
||||||
|
|
||||||
|
@screen lg {
|
||||||
|
@apply absolute right-0 w-screen;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .dropdownMenuContainer {
|
||||||
|
@apply flex-col py-6 bg-primary h-full justify-around;
|
||||||
|
|
||||||
|
@screen lg {
|
||||||
|
@apply border border-accents-1 shadow-lg py-2 h-auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .link {
|
||||||
|
@apply flex space-x-2 cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
|
||||||
|
text-transform: capitalize;
|
||||||
|
|
||||||
|
& .icons svg {
|
||||||
|
@apply w-6 h-6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.off {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
75
components/core/UserNav/DropdownMenu.tsx
Normal file
75
components/core/UserNav/DropdownMenu.tsx
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
import { useTheme } from 'next-themes'
|
||||||
|
import s from './DropdownMenu.module.css'
|
||||||
|
import { FC } from 'react'
|
||||||
|
import { FocusScope } from '@react-aria/focus'
|
||||||
|
import {
|
||||||
|
useOverlay,
|
||||||
|
DismissButton,
|
||||||
|
usePreventScroll,
|
||||||
|
} from '@react-aria/overlays'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import cn from 'classnames'
|
||||||
|
import { Moon, Sun } from '@components/icon'
|
||||||
|
interface DropdownMenuProps {
|
||||||
|
onClose: () => void
|
||||||
|
innerRef: React.MutableRefObject<HTMLInputElement>
|
||||||
|
}
|
||||||
|
|
||||||
|
const DropdownMenu: FC<DropdownMenuProps> = ({
|
||||||
|
onClose,
|
||||||
|
children,
|
||||||
|
innerRef,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const { theme, setTheme } = useTheme()
|
||||||
|
|
||||||
|
let { overlayProps } = useOverlay(
|
||||||
|
{
|
||||||
|
isDismissable: true,
|
||||||
|
onClose: onClose,
|
||||||
|
isOpen: true,
|
||||||
|
},
|
||||||
|
innerRef
|
||||||
|
)
|
||||||
|
|
||||||
|
usePreventScroll()
|
||||||
|
return (
|
||||||
|
<FocusScope restoreFocus>
|
||||||
|
<div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
|
||||||
|
{/* Needed placeholder for User Interation*/}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<span onClick={onClose} className="bg-transparent h-12 w-12" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className={s.dropdownMenuContainer}>
|
||||||
|
<Link href="#">
|
||||||
|
<a className={s.link}>My Purchases</a>
|
||||||
|
</Link>
|
||||||
|
<Link href="#">
|
||||||
|
<a className={s.link}>My Account</a>
|
||||||
|
</Link>
|
||||||
|
<a
|
||||||
|
className={s.link}
|
||||||
|
onClick={() =>
|
||||||
|
theme === 'dark' ? setTheme('light') : setTheme('dark')
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Theme: <strong>{theme}</strong>{' '}
|
||||||
|
</span>
|
||||||
|
<span className={s.icons}>
|
||||||
|
{theme === 'dark' ? <Moon /> : <Sun />}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<Link href="#">
|
||||||
|
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</FocusScope>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DropdownMenu
|
@ -2,30 +2,25 @@
|
|||||||
@apply relative;
|
@apply relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mainContainer {
|
||||||
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
@apply flex flex-row items-center h-full;
|
@apply flex flex-row items-center justify-items-end h-full;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
|
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@apply text-accents-8;
|
@apply text-accents-8 transition ease-in-out duration-100 transform scale-110;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.heart:hover svg {
|
||||||
|
fill: var(--accents-9);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@apply mr-0;
|
@apply mr-0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdownMenu {
|
|
||||||
@apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1 bg-primary;
|
|
||||||
max-width: 160px;
|
|
||||||
|
|
||||||
&.dropdownMenuContainer {
|
|
||||||
@apply shadow-lg overflow-hidden relative grid py-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .link {
|
|
||||||
@apply px-6 py-3 flex items-center space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -1,82 +1,68 @@
|
|||||||
import { FC, useState } from 'react'
|
import Link from 'next/link'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import useCart from '@lib/bigcommerce/cart/use-cart'
|
import s from './UserNav.module.css'
|
||||||
import { Avatar, Toggle } from '@components/core'
|
import { FC, useRef } from 'react'
|
||||||
|
|
||||||
|
import { Avatar } from '@components/core'
|
||||||
import { Heart, Bag } from '@components/icon'
|
import { Heart, Bag } from '@components/icon'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import s from './UserNav.module.css'
|
import DropdownMenu from './DropdownMenu'
|
||||||
import { useTheme } from 'next-themes'
|
|
||||||
import Link from 'next/link'
|
import useCart from '@lib/bigcommerce/cart/use-cart'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const countItem = (count: number, item: any) => count + item.quantity
|
const countItem = (count: number, item: any) => count + item.quantity
|
||||||
|
|
||||||
const countItems = (count: number, items: any[]) =>
|
const countItems = (count: number, items: any[]) =>
|
||||||
items.reduce(countItem, count)
|
items.reduce(countItem, count)
|
||||||
|
|
||||||
const UserNav: FC<Props> = ({ className }) => {
|
const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
||||||
const { data } = useCart()
|
const { data } = useCart()
|
||||||
const { theme, setTheme } = useTheme()
|
const {
|
||||||
const [displayDropdown, setDisplayDropdown] = useState(false)
|
openSidebar,
|
||||||
const { openSidebar, closeSidebar, displaySidebar } = useUI()
|
closeSidebar,
|
||||||
|
displaySidebar,
|
||||||
|
displayDropdown,
|
||||||
|
openDropdown,
|
||||||
|
closeDropdown,
|
||||||
|
} = 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)}>
|
||||||
<ul className={s.list}>
|
<div className={s.mainContainer}>
|
||||||
<li
|
<ul className={s.list}>
|
||||||
className={s.item}
|
<li
|
||||||
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
|
className={s.item}
|
||||||
>
|
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
|
||||||
<Bag />
|
>
|
||||||
{itemsCount > 0 && (
|
<Bag />
|
||||||
<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 > 0 && (
|
||||||
{itemsCount}
|
<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">
|
||||||
</span>
|
{itemsCount}
|
||||||
)}
|
</span>
|
||||||
</li>
|
)}
|
||||||
<Link href="/wishlist">
|
|
||||||
<li className={s.item}>
|
|
||||||
<Heart />
|
|
||||||
</li>
|
</li>
|
||||||
</Link>
|
<Link href="/wishlist">
|
||||||
<li
|
<li className={cn(s.item, s.heart)}>
|
||||||
className={s.item}
|
<Heart />
|
||||||
onClick={() => {
|
</li>
|
||||||
setDisplayDropdown((i) => !i)
|
</Link>
|
||||||
}}
|
<li
|
||||||
>
|
className={s.item}
|
||||||
<Avatar />
|
onClick={() => (displayDropdown ? closeDropdown() : openDropdown())}
|
||||||
</li>
|
>
|
||||||
</ul>
|
<Avatar />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
{displayDropdown && (
|
{displayDropdown && (
|
||||||
<div className={s.dropdownMenu}>
|
<DropdownMenu onClose={closeDropdown} innerRef={ref} />
|
||||||
<nav className={s.dropdownMenuContainer}>
|
|
||||||
<Link href="#">
|
|
||||||
<a className={s.link}>My Purchases</a>
|
|
||||||
</Link>
|
|
||||||
<Link href="#">
|
|
||||||
<a className={s.link}>My Account</a>
|
|
||||||
</Link>
|
|
||||||
<span className="inline-flex items-start px-6 py-2">
|
|
||||||
<span className="capitalize inline-block mr-2 text-base leading-6 font-medium text-gray-900">
|
|
||||||
Theme
|
|
||||||
</span>
|
|
||||||
<Toggle
|
|
||||||
checked={theme === 'dark'}
|
|
||||||
onChange={() =>
|
|
||||||
theme === 'dark' ? setTheme('light') : setTheme('dark')
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<Link href="#">
|
|
||||||
<a className={cn(s.link, 'mt-4')}>Logout</a>
|
|
||||||
</Link>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</nav>
|
</nav>
|
||||||
)
|
)
|
||||||
|
19
components/icon/Moon.tsx
Normal file
19
components/icon/Moon.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
const Moon = ({ ...props }) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
fill="none"
|
||||||
|
shape-rendering="geometricPrecision"
|
||||||
|
>
|
||||||
|
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Moon
|
27
components/icon/Sun.tsx
Normal file
27
components/icon/Sun.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
const Sun = ({ ...props }) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
fill="none"
|
||||||
|
shape-rendering="geometricPrecision"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="12" r="5" />
|
||||||
|
<path d="M12 1v2" />
|
||||||
|
<path d="M12 21v2" />
|
||||||
|
<path d="M4.22 4.22l1.42 1.42" />
|
||||||
|
<path d="M18.36 18.36l1.42 1.42" />
|
||||||
|
<path d="M1 12h2" />
|
||||||
|
<path d="M21 12h2" />
|
||||||
|
<path d="M4.22 19.78l1.42-1.42" />
|
||||||
|
<path d="M18.36 5.64l1.42-1.42" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Sun
|
@ -6,3 +6,5 @@ export { default as ArrowLeft } from './ArrowLeft'
|
|||||||
export { default as Plus } from './Plus'
|
export { default as Plus } from './Plus'
|
||||||
export { default as Minus } from './Minus'
|
export { default as Minus } from './Minus'
|
||||||
export { default as Check } from './Check'
|
export { default as Check } from './Check'
|
||||||
|
export { default as Sun } from './Sun'
|
||||||
|
export { default as Moon } from './Moon'
|
||||||
|
@ -34,7 +34,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nameBox {
|
.nameBox {
|
||||||
@apply absolute top-6 left-0 z-50;
|
@apply absolute top-6 left-0 z-10;
|
||||||
|
|
||||||
& .name {
|
& .name {
|
||||||
@apply px-6 py-2 bg-primary text-primary font-bold;
|
@apply px-6 py-2 bg-primary text-primary font-bold;
|
||||||
|
@ -8,7 +8,7 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Container: FC<Props> = ({ children, className, el = 'div' }) => {
|
const Container: FC<Props> = ({ children, className, el = 'div' }) => {
|
||||||
const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className)
|
const rootClassName = cn('mx-auto max-w-7xl px-6', className)
|
||||||
|
|
||||||
let Component: React.ComponentType<React.HTMLAttributes<
|
let Component: React.ComponentType<React.HTMLAttributes<
|
||||||
HTMLDivElement
|
HTMLDivElement
|
||||||
|
@ -4,10 +4,12 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
|
|||||||
|
|
||||||
export interface State {
|
export interface State {
|
||||||
displaySidebar: boolean
|
displaySidebar: boolean
|
||||||
|
displayDropdown: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
displaySidebar: false,
|
displaySidebar: false,
|
||||||
|
displayDropdown: false,
|
||||||
}
|
}
|
||||||
|
|
||||||
type Action =
|
type Action =
|
||||||
@ -17,21 +19,61 @@ type Action =
|
|||||||
| {
|
| {
|
||||||
type: 'CLOSE_SIDEBAR'
|
type: 'CLOSE_SIDEBAR'
|
||||||
}
|
}
|
||||||
|
| {
|
||||||
|
type: 'OPEN_DROPDOWN'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: 'CLOSE_DROPDOWN'
|
||||||
|
}
|
||||||
|
|
||||||
export const UIContext = React.createContext<State | any>(initialState)
|
export const UIContext = React.createContext<State | any>(initialState)
|
||||||
|
|
||||||
UIContext.displayName = 'UIContext'
|
UIContext.displayName = 'UIContext'
|
||||||
|
|
||||||
|
function uiReducer(state: State, action: Action) {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'OPEN_SIDEBAR': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
displaySidebar: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
case 'CLOSE_SIDEBAR': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
displaySidebar: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
case 'OPEN_DROPDOWN': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
displayDropdown: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
case 'CLOSE_DROPDOWN': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
displayDropdown: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export const UIProvider: FC = (props) => {
|
export const UIProvider: FC = (props) => {
|
||||||
const [state, dispatch] = React.useReducer(uiReducer, initialState)
|
const [state, dispatch] = React.useReducer(uiReducer, initialState)
|
||||||
|
|
||||||
const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
|
const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
|
||||||
const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
|
const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
|
||||||
|
|
||||||
|
const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
|
||||||
|
const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
|
||||||
|
|
||||||
const value = {
|
const value = {
|
||||||
...state,
|
...state,
|
||||||
openSidebar,
|
openSidebar,
|
||||||
closeSidebar,
|
closeSidebar,
|
||||||
|
openDropdown,
|
||||||
|
closeDropdown,
|
||||||
}
|
}
|
||||||
|
|
||||||
return <UIContext.Provider value={value} {...props} />
|
return <UIContext.Provider value={value} {...props} />
|
||||||
@ -45,27 +87,6 @@ export const useUI = () => {
|
|||||||
return context
|
return context
|
||||||
}
|
}
|
||||||
|
|
||||||
function uiReducer(state: State, action: Action) {
|
|
||||||
switch (action.type) {
|
|
||||||
case 'OPEN_SIDEBAR': {
|
|
||||||
return !state.displaySidebar
|
|
||||||
? {
|
|
||||||
...state,
|
|
||||||
displaySidebar: true,
|
|
||||||
}
|
|
||||||
: state
|
|
||||||
}
|
|
||||||
case 'CLOSE_SIDEBAR': {
|
|
||||||
return state.displaySidebar
|
|
||||||
? {
|
|
||||||
...state,
|
|
||||||
displaySidebar: false,
|
|
||||||
}
|
|
||||||
: state
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ManagedUIContext: FC = ({ children }) => (
|
export const ManagedUIContext: FC = ({ children }) => (
|
||||||
<UIProvider>
|
<UIProvider>
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user