website refactor

apps/website/components/leagues/MembershipStatus.tsx

@@ -1,80 +1,63 @@
 'use client';
 
-import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
+import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
 import { getMembership } from '@/lib/leagueMembership';
 import type { MembershipRole } from '@/lib/types/MembershipRole';
+import { Badge } from '@/ui/Badge';
 
 interface MembershipStatusProps {
   leagueId: string;
-  className?: string;
 }
 
-export default function MembershipStatus({ leagueId, className = '' }: MembershipStatusProps) {
+export function MembershipStatus({ leagueId }: MembershipStatusProps) {
   const currentDriverId = useEffectiveDriverId();
   
   if (!currentDriverId) {
     return (
-      <span className={`px-3 py-1 text-xs font-medium bg-gray-700/50 text-gray-400 rounded border border-gray-600/50 ${className}`}>
+      <Badge variant="default">
         Not a Member
-      </span>
+      </Badge>
     );
   }
   
-  const membership = getMembership(leagueId, currentDriverId);
+  const membership = currentDriverId ? getMembership(leagueId, currentDriverId) : null;
 
   if (!membership) {
     return (
-      <span className={`px-3 py-1 text-xs font-medium bg-gray-700/50 text-gray-400 rounded border border-gray-600/50 ${className}`}>
+      <Badge variant="default">
         Not a Member
-      </span>
+      </Badge>
     );
   }
 
-  const getRoleDisplay = (role: MembershipRole): { text: string; bgColor: string; textColor: string; borderColor: string } => {
+  const getRoleVariant = (role: MembershipRole): 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' => {
     switch (role) {
       case 'owner':
-        return {
-          text: 'Owner',
-          bgColor: 'bg-yellow-500/10',
-          textColor: 'text-yellow-500',
-          borderColor: 'border-yellow-500/30',
-        };
+        return 'warning';
       case 'admin':
-        return {
-          text: 'Admin',
-          bgColor: 'bg-purple-500/10',
-          textColor: 'text-purple-400',
-          borderColor: 'border-purple-500/30',
-        };
+        return 'primary';
       case 'steward':
-        return {
-          text: 'Steward',
-          bgColor: 'bg-blue-500/10',
-          textColor: 'text-blue-400',
-          borderColor: 'border-blue-500/30',
-        };
+        return 'info';
       case 'member':
-        return {
-          text: 'Member',
-          bgColor: 'bg-primary-blue/10',
-          textColor: 'text-primary-blue',
-          borderColor: 'border-primary-blue/30',
-        };
+        return 'primary';
       default:
-        return {
-          text: 'Member',
-          bgColor: 'bg-primary-blue/10',
-          textColor: 'text-primary-blue',
-          borderColor: 'border-primary-blue/30',
-        };
+        return 'default';
     }
   };
 
-  const { text, bgColor, textColor, borderColor } = getRoleDisplay(membership.role);
+  const getRoleText = (role: MembershipRole): string => {
+    switch (role) {
+      case 'owner': return 'Owner';
+      case 'admin': return 'Admin';
+      case 'steward': return 'Steward';
+      case 'member': return 'Member';
+      default: return 'Member';
+    }
+  };
 
   return (
-    <span className={`px-3 py-1 text-xs font-medium ${bgColor} ${textColor} rounded border ${borderColor} ${className}`}>
-      {text}
-    </span>
+    <Badge variant={getRoleVariant(membership.role)}>
+      {getRoleText(membership.role)}
+    </Badge>
   );
 }