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:
Tiago Yamamoto 2025-12-23 16:01:54 -03:00
parent 77d23dac7e
commit cad6010965

View file

@ -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}>