website refactor

apps/website/ui/Button.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode, MouseEventHandler } from 'react';
+
+interface ButtonProps {
+  children: ReactNode;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+}
+
+export function Button({ 
+  children, 
+  onClick, 
+  className = '',
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  type = 'button'
+}: ButtonProps) {
+  const baseClasses = 'inline-flex items-center rounded-lg transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2';
+  
+  const variantClasses = {
+    primary: 'bg-primary-blue text-white hover:bg-primary-blue/80 focus-visible:outline-primary-blue',
+    secondary: 'bg-iron-gray text-white border border-charcoal-outline hover:bg-iron-gray/80 focus-visible:outline-primary-blue',
+    danger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600',
+    ghost: 'bg-transparent text-gray-400 hover:bg-gray-800 focus-visible:outline-gray-400'
+  };
+  
+  const sizeClasses = {
+    sm: 'min-h-[36px] px-3 py-1.5 text-xs',
+    md: 'min-h-[44px] px-4 py-2 text-sm',
+    lg: 'min-h-[52px] px-6 py-3 text-base'
+  };
+  
+  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
+  
+  const classes = [
+    baseClasses,
+    variantClasses[variant],
+    sizeClasses[size],
+    disabledClasses,
+    className
+  ].filter(Boolean).join(' ');
+  
+  return (
+    <button 
+      type={type}
+      className={classes}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}