UI refactoring: Profile, History, and Plans Components

2025-12-07 23:59:33 +02:00
parent 57f7ad077e
commit a3a9aa7194
8 changed files with 829 additions and 667 deletions
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,49 @@
+
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    fullWidth?: boolean;
+    loading?: boolean;
+    children: React.ReactNode;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className = '', variant = 'primary', size = 'md', fullWidth = false, loading = false, children, disabled, ...props }, ref) => {
+
+        const baseStyles = "inline-flex items-center justify-center rounded-full font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
+
+        const variants = {
+            primary: "bg-primary text-on-primary hover:bg-primary/90",
+            secondary: "bg-secondary-container text-on-secondary-container hover:bg-secondary-container/80",
+            outline: "border border-outline text-primary hover:bg-primary-container/10",
+            ghost: "text-on-surface hover:bg-surface-container-high",
+            destructive: "bg-error text-on-error hover:bg-error/90",
+        };
+
+        const sizes = {
+            sm: "h-8 px-3 text-xs",
+            md: "h-10 px-4 text-sm",
+            lg: "h-12 px-8 text-base",
+            icon: "h-10 w-10",
+        };
+
+        const width = fullWidth ? "w-full" : "";
+
+        return (
+            <button
+                ref={ref}
+                className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${width} ${className}`}
+                disabled={disabled || loading}
+                {...props}
+            >
+                {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {children}
+            </button>
+        );
+    }
+);
+
+Button.displayName = "Button";