Update profile dropdown in marketplace shell

This commit is contained in:
Tiago Yamamoto 2025-12-23 11:48:54 -03:00
parent f2cdadb73f
commit 6a66503b48

View file

@ -9,6 +9,8 @@ export function Shell({ children }: { children: React.ReactNode }) {
const isOwner = user?.role === 'owner' || user?.role === 'seller'
const isAdmin = user?.role === 'admin'
const profilePath = isAdmin ? '/dashboard/profile' : '/meu-perfil'
const settingsPath = isOwner ? '/company' : '/dashboard/profile'
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
@ -61,49 +63,41 @@ export function Shell({ children }: { children: React.ReactNode }) {
Checkout
</Link>
{user && (
<div className="relative" ref={profileMenuRef}>
<div className="relative flex items-center" ref={profileMenuRef}>
<button
type="button"
onClick={() => setIsProfileOpen((prev) => !prev)}
className="flex items-center gap-2 rounded bg-white/10 px-3 py-1 text-xs font-semibold hover:bg-white/20 whitespace-nowrap"
className="flex items-center gap-3 rounded bg-white/10 px-3 py-2 text-left text-xs font-semibold hover:bg-white/20 whitespace-nowrap"
aria-haspopup="true"
aria-expanded={isProfileOpen}
>
Perfil
<span className="text-[10px] font-normal uppercase text-white/80">{user.role}</span>
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-[11px] font-bold">
{user.name.charAt(0).toUpperCase()}
</div>
<div className="flex flex-col items-start leading-tight">
<span className="text-sm font-semibold">{user.name}</span>
<span className="text-[10px] uppercase text-white/80">{user.role}</span>
</div>
<svg className="h-3 w-3 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{isProfileOpen && (
<div className="absolute right-0 mt-2 w-48 rounded-md bg-white py-1 text-sm text-gray-700 shadow-lg ring-1 ring-black/5">
{isOwner && (
<Link
to="/meu-perfil"
className="block px-4 py-2 hover:bg-gray-100"
onClick={() => setIsProfileOpen(false)}
>
Meu Perfil
</Link>
)}
{isOwner && (
<Link
to="/company"
className="block px-4 py-2 hover:bg-gray-100"
onClick={() => setIsProfileOpen(false)}
>
Perfil da Empresa
</Link>
)}
{isAdmin && (
<Link
to="/dashboard/profile"
className="block px-4 py-2 hover:bg-gray-100"
onClick={() => setIsProfileOpen(false)}
>
Meu Perfil
</Link>
)}
<div className="absolute right-0 top-full z-50 mt-2 w-52 rounded-md bg-white py-2 text-sm text-gray-700 shadow-lg">
<Link
to={profilePath}
className="block px-4 py-2 hover:bg-gray-100"
onClick={() => setIsProfileOpen(false)}
>
Ver Perfil
</Link>
<Link
to={settingsPath}
className="block px-4 py-2 hover:bg-gray-100"
onClick={() => setIsProfileOpen(false)}
>
Configurações
</Link>
<button
type="button"
onClick={logout}