47 lines
1.7 KiB
JavaScript
47 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { Badge } from './ui/badge';
|
|
|
|
const STATUS_BADGE_CONFIG = {
|
|
|
|
//status-based badges
|
|
pending_email: { label: 'Pending Email', variant: 'orange2' },
|
|
pending_validation: { label: 'Pending Validation', variant: 'gray' },
|
|
payment_pending: { label: 'Payment Pending', variant: 'orange' },
|
|
active: { label: 'Active', variant: 'green' },
|
|
inactive: { label: 'Inactive', variant: 'gray2' },
|
|
canceled: { label: 'Canceled', variant: 'red' },
|
|
expired: { label: 'Expired', variant: 'red2' },
|
|
abandoned: { label: 'Abandoned', variant: 'gray3' },
|
|
rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' },
|
|
|
|
//role-based badges
|
|
finance: { label: 'Finance Manager', variant: 'purple' },
|
|
guest: { label: 'Guest', variant: 'gray' },
|
|
member: { label: 'Member', variant: 'purple' },
|
|
superadmin: { label: 'Superadmin', variant: 'purple' },
|
|
admin: { label: 'Admin', variant: 'purple' },
|
|
moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
|
|
staff: { label: 'Staff', variant: 'gray' },
|
|
media: { label: 'Media', variant: 'gray2' },
|
|
|
|
//donation badges
|
|
pending: { label: 'Payment Pending', variant: 'orange' },
|
|
completed: { label: 'Completed', variant: 'green' },
|
|
failed: { label: 'Failed', className: 'bg-red-100 text-red-700' }
|
|
};
|
|
|
|
//todo: make shield icon dynamic based on status
|
|
const StatusBadge = ({ status }) => {
|
|
const statusConfig = STATUS_BADGE_CONFIG[status] || STATUS_BADGE_CONFIG.inactive;
|
|
|
|
return (
|
|
<Badge variant={statusConfig.variant} className=" px-3 py-1 rounded-md text-sm">
|
|
{/* <Shield className="h-3 w-3 mr-1 inline" /> */}
|
|
{statusConfig.label}
|
|
</Badge>
|
|
);
|
|
};
|
|
|
|
|
|
export default StatusBadge;
|