website refactor

apps/website/components/ui/AuthContainer.tsx

@@ -0,0 +1,18 @@
+/**
+ * AuthContainer - UI component for auth page layouts
+ * 
+ * Pure presentation component for auth page container.
+ * Used by auth layout to provide consistent styling.
+ */
+
+interface AuthContainerProps {
+  children: React.ReactNode;
+}
+
+export function AuthContainer({ children }: AuthContainerProps) {
+  return (
+    <div className="min-h-screen bg-deep-graphite flex items-center justify-center p-4">
+      {children}
+    </div>
+  );
+}

apps/website/components/ui/AuthError.tsx

@@ -0,0 +1,22 @@
+/**
+ * AuthError - UI component for auth page error states
+ * 
+ * Pure presentation component for displaying auth-related errors.
+ * Used by page.tsx files to handle PageQuery errors.
+ */
+
+import { ErrorBanner } from './ErrorBanner';
+
+interface AuthErrorProps {
+  action: string;
+}
+
+export function AuthError({ action }: AuthErrorProps) {
+  return (
+    <ErrorBanner 
+      message={`Failed to load ${action} page`} 
+      title="Error"
+      variant="error"
+    />
+  );
+}

apps/website/components/ui/AuthLoading.tsx

@@ -0,0 +1,24 @@
+/**
+ * AuthLoading - UI component for auth page loading states
+ * 
+ * Pure presentation component for displaying auth-related loading.
+ * Used by LoginClient.tsx for authenticated redirect states.
+ */
+
+import { LoadingWrapper } from '../shared/state/LoadingWrapper';
+
+interface AuthLoadingProps {
+  message?: string;
+}
+
+export function AuthLoading({ message = 'Authenticating...' }: AuthLoadingProps) {
+  return (
+    <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
+      <LoadingWrapper 
+        variant="spinner" 
+        message={message}
+        size="lg"
+      />
+    </main>
+  );
+}

apps/website/components/ui/ErrorBanner.tsx

@@ -0,0 +1,31 @@
+/**
+ * ErrorBanner - UI component for displaying error messages
+ * 
+ * Pure UI element for error display in templates and components.
+ * No business logic, just presentation.
+ */
+
+export interface ErrorBannerProps {
+  message: string;
+  title?: string;
+  variant?: 'error' | 'warning' | 'info';
+}
+
+export function ErrorBanner({ message, title, variant = 'error' }: ErrorBannerProps) {
+  const baseClasses = 'px-4 py-3 rounded-lg border flex items-start gap-3';
+  
+  const variantClasses = {
+    error: 'bg-racing-red/10 border-racing-red text-racing-red',
+    warning: 'bg-yellow-500/10 border-yellow-500 text-yellow-300',
+    info: 'bg-primary-blue/10 border-primary-blue text-primary-blue',
+  };
+
+  return (
+    <div className={`${baseClasses} ${variantClasses[variant]}`}>
+      <div className="flex-1">
+        {title && <div className="font-medium">{title}</div>}
+        <div className="text-sm opacity-90">{message}</div>
+      </div>
+    </div>
+  );
+}