wip

apps/website/components/leagues/MembershipStatus.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { getMembership, getCurrentDriverId, type MembershipRole } from '@gridpilot/racing/application';
+
+interface MembershipStatusProps {
+  leagueId: string;
+  className?: string;
+}
+
+export default function MembershipStatus({ leagueId, className = '' }: MembershipStatusProps) {
+  const currentDriverId = getCurrentDriverId();
+  const membership = getMembership(leagueId, currentDriverId);
+
+  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}`}>
+        Not a Member
+      </span>
+    );
+  }
+
+  const getRoleDisplay = (role: MembershipRole): { text: string; bgColor: string; textColor: string; borderColor: string } => {
+    switch (role) {
+      case 'owner':
+        return {
+          text: 'Owner',
+          bgColor: 'bg-yellow-500/10',
+          textColor: 'text-yellow-500',
+          borderColor: 'border-yellow-500/30',
+        };
+      case 'admin':
+        return {
+          text: 'Admin',
+          bgColor: 'bg-purple-500/10',
+          textColor: 'text-purple-400',
+          borderColor: 'border-purple-500/30',
+        };
+      case 'steward':
+        return {
+          text: 'Steward',
+          bgColor: 'bg-blue-500/10',
+          textColor: 'text-blue-400',
+          borderColor: 'border-blue-500/30',
+        };
+      case 'member':
+        return {
+          text: 'Member',
+          bgColor: 'bg-primary-blue/10',
+          textColor: 'text-primary-blue',
+          borderColor: 'border-primary-blue/30',
+        };
+    }
+  };
+
+  const { text, bgColor, textColor, borderColor } = getRoleDisplay(membership.role);
+
+  return (
+    <span className={`px-3 py-1 text-xs font-medium ${bgColor} ${textColor} rounded border ${borderColor} ${className}`}>
+      {text}
+    </span>
+  );
+}