31 lines
1.0 KiB
React
31 lines
1.0 KiB
React
|
import React, { useMemo } from 'react';
|
||
|
|
import { NavLink } from 'react-router-dom';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
export const NavPill = React.memo(function NavPill({ item, onNavigate }) {
|
||
|
|
const Icon = useMemo(() => item.icon, [item.icon]);
|
||
|
|
const to = useMemo(() => item.to, [item.to]);
|
||
|
|
const end = useMemo(() => item.end, [item.end]);
|
||
|
|
const label = useMemo(() => item.label, [item.label]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<NavLink
|
||
|
|
to={to}
|
||
|
|
end={end}
|
||
|
|
onClick={onNavigate}
|
||
|
|
className={({ isActive }) => cn(
|
||
|
|
'inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm font-medium transition-all',
|
||
|
|
'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
|
||
|
|
isActive
|
||
|
|
? 'bg-primary text-primary-foreground shadow-sm shadow-primary/20'
|
||
|
|
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground hover:shadow-sm'
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon className="h-4 w-4" />
|
||
|
|
<span>{label}</span>
|
||
|
|
</NavLink>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
NavPill.displayName = 'NavPill';
|