website refactor

apps/website/ui/Button.tsx

@@ -1,6 +1,8 @@
 import React, { ReactNode, MouseEventHandler, ButtonHTMLAttributes, forwardRef } from 'react';
 import { Stack } from './Stack';
 import { Box, BoxProps } from './Box';
+import { Loader2 } from 'lucide-react';
+import { Icon } from './Icon';
 
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as' | 'onMouseEnter' | 'onMouseLeave' | 'onSubmit'>, Omit<BoxProps<'button'>, 'as' | 'onClick' | 'onSubmit'> {
   children: ReactNode;
@@ -9,6 +11,7 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as'
   variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-final' | 'discord';
   size?: 'sm' | 'md' | 'lg';
   disabled?: boolean;
+  isLoading?: boolean;
   type?: 'button' | 'submit' | 'reset';
   icon?: ReactNode;
   fullWidth?: boolean;
@@ -25,6 +28,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   variant = 'primary',
   size = 'md',
   disabled = false,
+  isLoading = false,
   type = 'button',
   icon,
   fullWidth = false,
@@ -51,7 +55,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     lg: 'min-h-[48px] px-6 py-3 text-base font-medium'
   };
   
-  const disabledClasses = disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer';
+  const disabledClasses = (disabled || isLoading) ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer';
   const widthClasses = fullWidth ? 'w-full' : '';
   
   const classes = [
@@ -63,12 +67,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     className
   ].filter(Boolean).join(' ');
   
-  const content = icon ? (
+  const content = (
     <Stack direction="row" align="center" gap={2} center={fullWidth}>
-      {icon}
+      {isLoading && <Icon icon={Loader2} size={size === 'sm' ? 3 : 4} animate="spin" />}
+      {!isLoading && icon}
       {children}
     </Stack>
-  ) : children;
+  );
 
   if (as === 'a') {
     return (
@@ -92,7 +97,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
       type={type}
       className={classes}
       onClick={onClick}
-      disabled={disabled}
+      disabled={disabled || isLoading}
       {...props}
     >
       {content}