forked from crowetic/commerce
Latest updates
This commit is contained in:
parent
34f270a353
commit
8bb39b3a83
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user