wip

apps/website/ui/Button.tsx

@@ -5,7 +5,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   className?: string;
-  variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-performance' | 'race-final';
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-performance' | 'race-final' | 'discord';
   size?: 'sm' | 'md' | 'lg';
   disabled?: boolean;
   type?: 'button' | 'submit' | 'reset';
@@ -13,9 +13,11 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   fullWidth?: boolean;
   as?: 'button' | 'a';
   href?: string;
+  target?: string;
+  rel?: string;
 }
 
-export function Button({ 
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ 
   children, 
   onClick, 
   className = '',
@@ -27,8 +29,10 @@ export function Button({
   fullWidth = false,
   as = 'button',
   href,
+  target,
+  rel,
   ...props
-}: ButtonProps) {
+}, ref) => {
   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 = {
@@ -37,7 +41,8 @@ export function Button({
     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',
     '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'
+    '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',
+    discord: 'bg-[#5865F2] text-white hover:bg-[#4752C4] shadow-[0_0_20px_rgba(88,101,242,0.3)] hover:shadow-[0_0_30px_rgba(88,101,242,0.6)] focus-visible:outline-[#5865F2]'
   };
   
   const sizeClasses = {
@@ -69,6 +74,8 @@ export function Button({
     return (
       <a 
         href={href}
+        target={target}
+        rel={rel}
         className={classes}
         {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
       >
@@ -79,6 +86,7 @@ export function Button({
 
   return (
     <button 
+      ref={ref}
       type={type}
       className={classes}
       onClick={onClick}
@@ -88,4 +96,6 @@ export function Button({
       {content}
     </button>
   );
-}
+});
+
+Button.displayName = 'Button';