auth rework

apps/website/components/ui/StatusBadge.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+
+type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'pending';
+
+interface StatusBadgeProps {
+  status: StatusType;
+  label: string;
+  icon?: React.ElementType;
+  size?: 'sm' | 'md';
+}
+
+const statusConfig: Record<StatusType, { color: string; bg: string; border: string }> = {
+  success: {
+    color: 'text-performance-green',
+    bg: 'bg-performance-green/10',
+    border: 'border-performance-green/30',
+  },
+  warning: {
+    color: 'text-warning-amber',
+    bg: 'bg-warning-amber/10',
+    border: 'border-warning-amber/30',
+  },
+  error: {
+    color: 'text-racing-red',
+    bg: 'bg-racing-red/10',
+    border: 'border-racing-red/30',
+  },
+  info: {
+    color: 'text-primary-blue',
+    bg: 'bg-primary-blue/10',
+    border: 'border-primary-blue/30',
+  },
+  neutral: {
+    color: 'text-gray-400',
+    bg: 'bg-iron-gray',
+    border: 'border-charcoal-outline',
+  },
+  pending: {
+    color: 'text-warning-amber',
+    bg: 'bg-warning-amber/10',
+    border: 'border-warning-amber/30',
+  },
+};
+
+/**
+ * Status badge component for displaying status indicators.
+ * Used for showing status of items like invoices, sponsorships, etc.
+ */
+export default function StatusBadge({ 
+  status, 
+  label, 
+  icon: Icon,
+  size = 'sm',
+}: StatusBadgeProps) {
+  const config = statusConfig[status];
+  const sizeClasses = size === 'sm' 
+    ? 'px-2 py-0.5 text-xs' 
+    : 'px-3 py-1 text-sm';
+  
+  return (
+    <span className={`inline-flex items-center gap-1.5 rounded-full font-medium border ${config.bg} ${config.color} ${config.border} ${sizeClasses}`}>
+      {Icon && <Icon className={size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'} />}
+      {label}
+    </span>
+  );
+}