36 lines
1.9 KiB
TypeScript

import React from 'react';
import type { SubmissionStatus } from '../../../src/types';
export interface StatusBadgeProps {
status: SubmissionStatus;
size?: 'sm' | 'md';
}
const statusConfig: Record<SubmissionStatus, { label: string; color: string; bg: string }> = {
pending: { label: 'Pending', color: 'text-gray-700', bg: 'bg-gray-100' },
creating_profile: { label: 'Creating Profile', color: 'text-blue-700', bg: 'bg-blue-100' },
profile_submitted: { label: 'Profile Submitted', color: 'text-blue-700', bg: 'bg-blue-100' },
creating_brand: { label: 'Creating Brand', color: 'text-indigo-700', bg: 'bg-indigo-100' },
brand_pending: { label: 'Brand Pending', color: 'text-indigo-700', bg: 'bg-indigo-100' },
brand_approved: { label: 'Brand Approved', color: 'text-green-700', bg: 'bg-green-100' },
brand_failed: { label: 'Brand Failed', color: 'text-red-700', bg: 'bg-red-100' },
creating_campaign: { label: 'Creating Campaign', color: 'text-purple-700', bg: 'bg-purple-100' },
campaign_pending: { label: 'Campaign Pending', color: 'text-purple-700', bg: 'bg-purple-100' },
campaign_approved: { label: 'Campaign Approved', color: 'text-green-700', bg: 'bg-green-100' },
campaign_failed: { label: 'Campaign Failed', color: 'text-red-700', bg: 'bg-red-100' },
remediation: { label: 'Remediation', color: 'text-yellow-700', bg: 'bg-yellow-100' },
manual_review: { label: 'Manual Review', color: 'text-orange-700', bg: 'bg-orange-100' },
completed: { label: 'Completed', color: 'text-green-700', bg: 'bg-green-100' }
};
export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, size = 'md' }) => {
const config = statusConfig[status];
const sizeClass = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-3 py-1';
return (
<span className={`inline-flex items-center font-medium rounded-full ${config.bg} ${config.color} ${sizeClass}`}>
{config.label}
</span>
);
};