MPM marketplace and UI updates

apps/platform-frontend/src/components/ui/icon.tsx

@@ -1,36 +1,40 @@
+import {
+  ArrowRight,
+  Boxes,
+  Check,
+  ClipboardList,
+  Clock3,
+  LayoutDashboard,
+  Menu,
+  Moon,
+  Plus,
+  Sun,
+  UserRound,
+  UsersRound,
+  X,
+  type LucideIcon,
+} from 'lucide-react';
 import { type ReactNode } from 'react';
 
 export type IconName = 'dashboard' | 'users' | 'modules' | 'system' | 'audit' | 'moon' | 'sun' | 'user' | 'arrow' | 'close' | 'menu' | 'plus' | 'check';
-
-const PATHS: Record<IconName, ReactNode> = {
-  dashboard: <><rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="3" width="7" height="7" rx="1.5" /><rect x="3" y="14" width="7" height="7" rx="1.5" /><rect x="14" y="14" width="7" height="7" rx="1.5" /></>,
-  users: <><path d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="10" cy="7" r="4" /><path d="M20 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" /></>,
-  modules: <><rect x="3" y="3" width="8" height="8" rx="2" /><rect x="13" y="3" width="8" height="5" rx="2" /><rect x="13" y="10" width="8" height="11" rx="2" /><rect x="3" y="13" width="8" height="8" rx="2" /></>,
-  system: <><path d="M12 8v4l2.5 2.5" /><circle cx="12" cy="12" r="9" /><path d="M12 3v2m9 7h-2M5 12H3m9 9v-2" /></>,
-  audit: <><path d="M8 4h10a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2Z" /><path d="M8 2v4m0 4h8m-8 4h8m-8 4h5" /></>,
-  moon: <path d="M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z" />,
-  sun: <><circle cx="12" cy="12" r="4" /><path d="M12 2v2m0 16v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42" /></>,
-  user: <><circle cx="12" cy="8" r="4" /><path d="M5 21a7 7 0 0 1 14 0" /></>,
-  arrow: <><path d="M5 12h14m-6-6 6 6-6 6" /></>,
-  close: <><path d="m18 6-12 12M6 6l12 12" /></>,
-  menu: <><path d="M4 6h16M4 12h16M4 18h16" /></>,
-  plus: <path d="M12 5v14M5 12h14" />,
-  check: <path d="m5 12 4 4L19 6" />,
+const ICONS: Record<IconName, LucideIcon> = {
+  dashboard: LayoutDashboard,
+  users: UsersRound,
+  modules: Boxes,
+  system: Clock3,
+  audit: ClipboardList,
+  moon: Moon,
+  sun: Sun,
+  user: UserRound,
+  arrow: ArrowRight,
+  close: X,
+  menu: Menu,
+  plus: Plus,
+  check: Check,
 };
 
+/** Lucide-Symbole im bestehenden MPM-Icon-API. */
 export function Icon({ name, className = 'h-5 w-5' }: { name: IconName; className?: string }): ReactNode {
-  return (
-    <svg
-      aria-hidden="true"
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      {PATHS[name]}
-    </svg>
-  );
+  const Component = ICONS[name];
+  return <Component aria-hidden="true" className={className} strokeWidth={1.8} />;
 }