65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import {
|
|
AlertTriangle,
|
|
Check,
|
|
Clock,
|
|
ThumbsDown,
|
|
ThumbsUp,
|
|
XCircle
|
|
} from 'lucide-react';
|
|
|
|
export type SponsorStatus = 'active' | 'pending' | 'approved' | 'declined' | 'expired' | 'warning';
|
|
|
|
interface SponsorStatusChipProps {
|
|
status: SponsorStatus;
|
|
label?: string;
|
|
}
|
|
|
|
const STATUS_CONFIG = {
|
|
active: { icon: Check, color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Active' },
|
|
pending: { icon: Clock, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Pending' },
|
|
approved: { icon: ThumbsUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', label: 'Approved' },
|
|
declined: { icon: ThumbsDown, color: 'text-racing-red', bgColor: 'bg-racing-red/10', label: 'Declined' },
|
|
expired: { icon: XCircle, color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'Expired' },
|
|
warning: { icon: AlertTriangle, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Action Required' },
|
|
};
|
|
|
|
/**
|
|
* SponsorStatusChip
|
|
*
|
|
* Semantic status indicator for sponsorship states.
|
|
* Follows the "Precision Racing Minimal" theme with instrument-grade feedback.
|
|
*/
|
|
export function SponsorStatusChip({ status, label }: SponsorStatusChipProps) {
|
|
const config = STATUS_CONFIG[status];
|
|
|
|
return (
|
|
<Stack
|
|
px={2.5}
|
|
py={1}
|
|
rounded="full"
|
|
bg={config.bgColor as string}
|
|
border
|
|
borderColor="border-charcoal-outline/30"
|
|
display="inline-block"
|
|
>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Icon icon={config.icon} size={3} color={config.color as string} />
|
|
<Text
|
|
size="xs"
|
|
weight="bold"
|
|
color={config.color as string}
|
|
uppercase
|
|
letterSpacing="wider"
|
|
>
|
|
{label || config.label}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|