Commit 6: Adminbereich (TanStack Router, 8 Menüpunkte, Scan-Logs)

packages/ui/src/Button.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "sm" | "md";
+}
+
+const VARIANT_CLASSES: Record<NonNullable<ButtonProps["variant"]>, string> = {
+  primary:
+    "bg-black text-white hover:bg-black/80 dark:bg-white dark:text-black dark:hover:bg-white/80",
+  secondary:
+    "bg-black/5 text-black hover:bg-black/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/20",
+  danger: "bg-red-500/10 text-red-600 hover:bg-red-500/20 dark:text-red-400",
+  ghost:
+    "bg-transparent text-black/60 hover:bg-black/5 dark:text-white/60 dark:hover:bg-white/10",
+};
+
+const SIZE_CLASSES: Record<NonNullable<ButtonProps["size"]>, string> = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "secondary", size = "md", className = "", disabled, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled}
+        className={`inline-flex items-center justify-center gap-2 rounded-lg font-medium
+          transition-colors disabled:cursor-not-allowed disabled:opacity-50
+          ${VARIANT_CLASSES[variant]} ${SIZE_CLASSES[size]} ${className}`}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";

packages/ui/src/index.ts

@@ -6,3 +6,6 @@ export type { StatusBadgeProps } from "./StatusBadge.js";
 
 export { ResultsList } from "./ResultsList.js";
 export type { ResultsListProps } from "./ResultsList.js";
+
+export { Button } from "./Button.js";
+export type { ButtonProps } from "./Button.js";