extract ui to lib

src/components/SidebarNavItem.tsx

@@ -0,0 +1,33 @@
+import type { ComponentType, SVGProps } from 'react';
+import { NavLink } from 'react-router-dom';
+
+type IconType = ComponentType<SVGProps<SVGSVGElement>>;
+
+type SidebarNavItemProps = {
+  to: string;
+  label: string;
+  icon: IconType;
+  collapsed: boolean;
+  onClick?: () => void;
+};
+
+export function SidebarNavItem({ to, label, icon: Icon, collapsed, onClick }: Readonly<SidebarNavItemProps>) {
+  const layoutClass = collapsed
+    ? 'px-2 justify-start lg:mx-auto lg:w-8 lg:justify-center lg:px-0'
+    : 'px-2 lg:w-full lg:justify-start';
+
+  return (
+    <NavLink
+      to={to}
+      onClick={onClick}
+      className={({ isActive }) => (
+        `inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
+          isActive ? 'bg-accent-500 text-white' : 'ui-body-secondary hover:bg-zinc-500/15'
+        }`
+      )}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      {!collapsed ? <span className="ml-2 truncate leading-none">{label}</span> : <span className="ml-2 lg:hidden">{label}</span>}
+    </NavLink>
+  );
+}