init commit

src/components/ui/ModernButton.tsx

@@ -0,0 +1,69 @@
+/**
+ * Modern Button Component
+ * Professional Resume Builder - Enhanced with resume-example.com design patterns
+ *
+ * @author David Valera Melendez <david@valera-melendez.de>
+ * @created 2025-08-07
+ * @location Made in Germany 🇩🇪
+ */
+
+'use client';
+
+import React from 'react';
+
+export interface ModernButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+  type?: 'button' | 'submit' | 'reset';
+}
+
+export const ModernButton: React.FC<ModernButtonProps> = ({
+  children,
+  onClick,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  className = '',
+  type = 'button',
+}) => {
+  const baseClasses =
+    'inline-flex items-center justify-center font-semibold transition-all duration-200 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed relative overflow-hidden';
+
+  const variantClasses = {
+    primary:
+      'bg-gradient-to-r from-primary-500 to-primary-600 text-white hover:from-primary-600 hover:to-primary-700 focus:ring-primary-500 shadow-medium hover:shadow-large active:shadow-soft',
+    secondary:
+      'bg-grayscale-100 text-text-primary hover:bg-grayscale-200 focus:ring-grayscale-500 border border-border-primary shadow-soft hover:shadow-medium',
+    outline:
+      'border-2 border-primary-500 text-primary-600 hover:bg-primary-50 focus:ring-primary-500 shadow-soft hover:shadow-medium',
+    ghost: 'text-primary-600 hover:bg-primary-50 focus:ring-primary-500',
+  };
+
+  const sizeClasses = {
+    sm: 'px-3 py-1.5 text-sm rounded-lg',
+    md: 'px-4 py-2.5 text-sm rounded-xl',
+    lg: 'px-6 py-3 text-base rounded-xl',
+  };
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled || loading}
+      className={` ${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className} `}
+    >
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        </div>
+      )}
+      <span className={loading ? 'opacity-0' : 'opacity-100'}>{children}</span>
+    </button>
+  );
+};