feat(marketplace): replace cart text with icon + badge counter
- Remove Checkout link from header navigation - Replace 'Carrinho' text with cart SVG icon - Add red badge showing cart item count (max 99+) - Import and use cartStore for real-time count updates
This commit is contained in:
parent
77d23dac7e
commit
cad6010965
1 changed files with 11 additions and 5 deletions
|
|
@ -1,11 +1,13 @@
|
|||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { useCartStore, selectCartSummary } from '../stores/cartStore'
|
||||
|
||||
export function Shell({ children }: { children: React.ReactNode }) {
|
||||
const { user, logout } = useAuth()
|
||||
const [isProfileOpen, setIsProfileOpen] = useState(false)
|
||||
const profileMenuRef = useRef<HTMLDivElement | null>(null)
|
||||
const { totalItems: cartCount } = useCartStore(selectCartSummary)
|
||||
|
||||
const isOwner = user?.role === 'owner' || user?.role === 'seller'
|
||||
const isAdmin = user?.role === 'admin'
|
||||
|
|
@ -56,11 +58,15 @@ export function Shell({ children }: { children: React.ReactNode }) {
|
|||
</Link>
|
||||
</>
|
||||
)}
|
||||
<Link to="/cart" className="hover:underline">
|
||||
Carrinho
|
||||
</Link>
|
||||
<Link to="/checkout" className="hover:underline">
|
||||
Checkout
|
||||
<Link to="/cart" className="relative hover:bg-white/10 p-2 rounded-lg transition-colors" title="Carrinho">
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
{cartCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold">
|
||||
{cartCount > 99 ? '99+' : cartCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
{user && (
|
||||
<div className="relative flex items-center" ref={profileMenuRef}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue