28 lines
1.2 KiB
React
28 lines
1.2 KiB
React
|
import React, { useMemo } from 'react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
const STATUS_META = {
|
||
|
|
paid: { label: 'Paid', cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30' },
|
||
|
|
upcoming: { label: 'Upcoming', cls: 'bg-secondary text-muted-foreground border border-border' },
|
||
|
|
due_soon: { label: 'Due Soon', cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30' },
|
||
|
|
late: { label: 'Late', cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30' },
|
||
|
|
missed: { label: 'Missed', cls: 'bg-red-400/15 text-red-500 border border-red-400/30' },
|
||
|
|
autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30' },
|
||
|
|
skipped: { label: 'Skipped', cls: 'bg-muted text-muted-foreground border border-border' },
|
||
|
|
};
|
||
|
|
|
||
|
|
export const StatusBadge = React.memo(function StatusBadge({ status }) {
|
||
|
|
const meta = useMemo(() => STATUS_META[status] || STATUS_META.upcoming, [status]);
|
||
|
|
return (
|
||
|
|
<span className={cn(
|
||
|
|
'inline-flex items-center px-2.5 py-0.5 text-[11px] rounded-md font-semibold',
|
||
|
|
'uppercase tracking-wide whitespace-nowrap',
|
||
|
|
meta.cls,
|
||
|
|
)}>
|
||
|
|
{meta.label}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
StatusBadge.displayName = 'StatusBadge';
|