81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
|
|
import { getMembership } from '@/lib/leagueMembership';
|
|
import type { MembershipRole } from '@/lib/types/MembershipRole';
|
|
|
|
interface MembershipStatusProps {
|
|
leagueId: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function MembershipStatus({ leagueId, className = '' }: 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}`}>
|
|
Not a Member
|
|
</span>
|
|
);
|
|
}
|
|
|
|
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',
|
|
};
|
|
default:
|
|
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>
|
|
);
|
|
}
|