78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import {Form, NavLink} from 'react-router';
|
|
import {
|
|
LayoutGrid,
|
|
LogOut,
|
|
MapPin,
|
|
Package,
|
|
UserRound,
|
|
} from 'lucide-react';
|
|
|
|
const linkBase =
|
|
"relative flex min-h-[54px] w-full items-center gap-3 border-b border-[rgba(0,0,0,0)] pl-3 pr-3 font-['Raleway',sans-serif] text-[0.86rem] uppercase tracking-[0.1em] no-underline transition-colors";
|
|
|
|
const inactive =
|
|
"border-l-[3px] border-transparent font-normal text-[#5a5550] hover:bg-[#faf8f3]/60";
|
|
|
|
const active =
|
|
"border-l-[3px] border-[#5d0b24] bg-[#faf8f3] font-medium text-[#5d0b24]";
|
|
|
|
type NavItem = {to: string; label: string; end?: boolean; Icon: typeof Package};
|
|
|
|
const ITEMS: NavItem[] = [
|
|
{to: '/account', label: 'Overview', end: true, Icon: LayoutGrid},
|
|
{to: '/account/orders', label: 'Orders', Icon: Package},
|
|
{to: '/account/profile', label: 'Personal Info', Icon: UserRound},
|
|
{to: '/account/addresses', label: 'Addresses', Icon: MapPin},
|
|
];
|
|
|
|
/**
|
|
* Account area left nav — Figma 123:11834. Only links for implemented routes
|
|
* (no Preferences / Security).
|
|
*/
|
|
export function AccountNav() {
|
|
return (
|
|
<nav
|
|
aria-label="Account"
|
|
className="w-full max-w-full shrink-0 border border-[rgba(26,26,26,0.07)] bg-white lg:max-w-[240px] lg:justify-self-start"
|
|
>
|
|
<div className="flex flex-col">
|
|
{ITEMS.map(({to, label, end, Icon}) => (
|
|
<NavLink
|
|
className={({isActive}) =>
|
|
`${linkBase} ${isActive ? active : inactive}`
|
|
}
|
|
end={end}
|
|
key={to}
|
|
to={to}
|
|
>
|
|
<Icon
|
|
aria-hidden
|
|
className="size-4 shrink-0 text-[currentColor] opacity-90"
|
|
strokeWidth={1.5}
|
|
/>
|
|
<span>{label}</span>
|
|
</NavLink>
|
|
))}
|
|
|
|
<Form
|
|
action="/account/logout"
|
|
className="border-t border-[rgba(0,0,0,0)]"
|
|
method="POST"
|
|
>
|
|
<button
|
|
className="flex min-h-[54px] w-full cursor-pointer items-center gap-3 border-0 border-l-[3px] border-transparent bg-transparent pl-3 pr-3 text-left font-['Raleway',sans-serif] text-[0.86rem] font-normal uppercase tracking-[0.1em] text-[#b03a2e] transition-opacity hover:opacity-85"
|
|
type="submit"
|
|
>
|
|
<LogOut
|
|
aria-hidden
|
|
className="size-4 shrink-0"
|
|
strokeWidth={1.5}
|
|
/>
|
|
<span>Sign out</span>
|
|
</button>
|
|
</Form>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|