cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Latest updates

Browse Source
This commit is contained in:
Belen Curcio 2020-10-24 17:06:20 -03:00
parent 34f270a353
commit 8bb39b3a83
3 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/core/I18nWidget/I18nWidget.module.css
View File

@ -3,7 +3,7 @@
} }
.button { .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 { .dropdownMenu {

11
components/core/UserNav/UserNav.module.css
View File

@ -2,9 +2,6 @@
@apply relative; @apply relative;
} }
.mainContainer {
}
.list { .list {
@apply flex flex-row items-center justify-items-end h-full; @apply flex flex-row items-center justify-items-end h-full;
} }
@ -25,3 +22,11 @@
@apply outline-none; @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;
}

25
components/core/UserNav/UserNav.tsx
View File

@ -20,7 +20,6 @@ const countItems = (count: number, items: any[]) =>
const UserNav: FC<Props> = ({ className, children, ...props }) => { const UserNav: FC<Props> = ({ className, children, ...props }) => {
const { data } = useCart() const { data } = useCart()
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)
return ( return (
@ -32,11 +31,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())} onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
> >
<Bag /> <Bag />
{itemsCount > 0 && ( {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
<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>
)}
</li> </li>
<Link href="/wishlist"> <Link href="/wishlist">
<li className={s.item}> <li className={s.item}>
@ -45,16 +40,14 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
</Link> </Link>
<li className={s.item}> <li className={s.item}>
<Menu> <Menu>
{({ open }) => { {({ open }) => (
return ( <>
<> <Menu.Button className={s.avatarButton}>
<Menu.Button className="inline-flex justify-center rounded-full"> <Avatar />
<Avatar /> </Menu.Button>
</Menu.Button> <DropdownMenu open={open} />
<DropdownMenu open={open} /> </>
</> )}
)
}}
</Menu> </Menu>
</li> </li>
</ul> </ul>