website refactor

apps/website/ui/Button.tsx

@@ -1,13 +1,18 @@
-import React, { ReactNode, MouseEventHandler } from 'react';
+import React, { ReactNode, MouseEventHandler, ButtonHTMLAttributes } from 'react';
+import { Stack } from './Stack';
 
-interface ButtonProps {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   className?: string;
-  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-performance' | 'race-final';
   size?: 'sm' | 'md' | 'lg';
   disabled?: boolean;
   type?: 'button' | 'submit' | 'reset';
+  icon?: ReactNode;
+  fullWidth?: boolean;
+  as?: 'button' | 'a';
+  href?: string;
 }
 
 export function Button({ 
@@ -17,15 +22,22 @@ export function Button({
   variant = 'primary',
   size = 'md',
   disabled = false,
-  type = 'button'
+  type = 'button',
+  icon,
+  fullWidth = false,
+  as = 'button',
+  href,
+  ...props
 }: ButtonProps) {
-  const baseClasses = 'inline-flex items-center rounded-lg transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2';
+  const baseClasses = 'inline-flex items-center rounded-lg transition-all duration-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 hover:scale-[1.02] active:scale-95';
   
   const variantClasses = {
-    primary: 'bg-primary-blue text-white hover:bg-primary-blue/80 focus-visible:outline-primary-blue',
+    primary: 'bg-primary-blue text-white hover:bg-primary-blue/80 focus-visible:outline-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.4)]',
     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'
+    ghost: 'bg-transparent text-gray-400 hover:bg-gray-800 focus-visible:outline-gray-400',
+    'race-performance': 'bg-gradient-to-r from-yellow-400 to-orange-500 text-white shadow-[0_0_15px_rgba(251,191,36,0.4)] hover:from-yellow-500 hover:to-orange-600 focus-visible:outline-yellow-400',
+    'race-final': 'bg-gradient-to-r from-purple-400 to-pink-500 text-white shadow-[0_0_15px_rgba(168,85,247,0.4)] hover:from-purple-500 hover:to-pink-600 focus-visible:outline-purple-400'
   };
   
   const sizeClasses = {
@@ -35,23 +47,45 @@ export function Button({
   };
   
   const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
+  const widthClasses = fullWidth ? 'w-full' : '';
   
   const classes = [
     baseClasses,
     variantClasses[variant],
     sizeClasses[size],
     disabledClasses,
+    widthClasses,
     className
   ].filter(Boolean).join(' ');
   
+  const content = icon ? (
+    <Stack direction="row" align="center" gap={2} center={fullWidth}>
+      {icon}
+      {children}
+    </Stack>
+  ) : children;
+
+  if (as === 'a') {
+    return (
+      <a 
+        href={href}
+        className={classes}
+        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {content}
+      </a>
+    );
+  }
+
   return (
     <button 
       type={type}
       className={classes}
       onClick={onClick}
       disabled={disabled}
+      {...props}
     >
-      {children}
+      {content}
     </button>
   );
-}
+}