di usage in website

apps/website/components/shared/state/ErrorDisplay.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { AlertTriangle, Wifi, RefreshCw, ArrowLeft, Home, X, Info } from 'lucide-react';
-import { ErrorDisplayProps } from '../types/state.types';
+import { ErrorDisplayProps } from './types';
 import Button from '@/components/ui/Button';
 
 /**
@@ -70,12 +70,6 @@ export function ErrorDisplay({
   // Icon based on error type
   const ErrorIcon = isConnectivity ? Wifi : AlertTriangle;
 
-  // Common button styles
-  const buttonBase = 'flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors disabled:opacity-50';
-  const primaryButton = `${buttonBase} bg-red-500 hover:bg-red-600 text-white`;
-  const secondaryButton = `${buttonBase} bg-iron-gray hover:bg-charcoal-outline text-gray-300 border border-charcoal-outline`;
-  const ghostButton = `${buttonBase} hover:bg-iron-gray/50 text-gray-300`;
-
   // Render different variants
   switch (variant) {
     case 'full-screen':
@@ -125,11 +119,11 @@ export function ErrorDisplay({
               {/* Action Buttons */}
               <div className="flex flex-col gap-2 pt-2">
                 {isRetryable && onRetry && (
-                  <button
+                  <Button
+                    variant="danger"
                     onClick={handleRetry}
                     disabled={isRetrying}
-                    className={primaryButton}
-                    aria-label={isRetrying ? 'Retrying...' : 'Try again'}
+                    className="w-full"
                   >
                     {isRetrying ? (
                       <>
@@ -142,55 +136,46 @@ export function ErrorDisplay({
                         Try Again
                       </>
                     )}
-                  </button>
+                  </Button>
                 )}
 
                 {showNavigation && (
                   <div className="flex gap-2">
-                    <button
+                    <Button
+                      variant="secondary"
                       onClick={handleGoBack}
-                      className={`${secondaryButton} flex-1`}
-                      aria-label="Go back to previous page"
+                      className="flex-1"
                     >
                       <ArrowLeft className="w-4 h-4" />
                       Go Back
-                    </button>
+                    </Button>
 
-                    <button
+                    <Button
+                      variant="secondary"
                       onClick={handleGoHome}
-                      className={`${secondaryButton} flex-1`}
-                      aria-label="Go to home page"
+                      className="flex-1"
                     >
                       <Home className="w-4 h-4" />
                       Home
-                    </button>
+                    </Button>
                   </div>
                 )}
 
                 {/* Custom Actions */}
                 {actions.length > 0 && (
                   <div className="flex flex-col gap-2 pt-2 border-t border-charcoal-outline/50">
-                    {actions.map((action, index) => {
-                      const variantClasses = {
-                        primary: 'bg-primary-blue hover:bg-blue-600 text-white',
-                        secondary: 'bg-iron-gray hover:bg-charcoal-outline text-gray-300 border border-charcoal-outline',
-                        danger: 'bg-red-600 hover:bg-red-700 text-white',
-                        ghost: 'hover:bg-iron-gray/50 text-gray-300',
-                      }[action.variant || 'secondary'];
-
-                      return (
-                        <button
-                          key={index}
-                          onClick={action.onClick}
-                          disabled={action.disabled}
-                          className={`${buttonBase} ${variantClasses} ${action.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
-                          aria-label={action.label}
-                        >
-                          {action.icon && <action.icon className="w-4 h-4" />}
-                          {action.label}
-                        </button>
-                      );
-                    })}
+                    {actions.map((action, index) => (
+                      <Button
+                        key={index}
+                        variant={action.variant || 'secondary'}
+                        onClick={action.onClick}
+                        disabled={action.disabled}
+                        className="w-full"
+                      >
+                        {action.icon && <action.icon className="w-4 h-4" />}
+                        {action.label}
+                      </Button>
+                    ))}
                   </div>
                 )}
               </div>