46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import type { ReactElement } from 'react';
|
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const statusBadgeVariants = cva(
|
|
'inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-semibold uppercase',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
success: 'bg-[rgba(16,185,129,0.1)] text-[#059669]',
|
|
failure: 'bg-[rgba(239,68,68,0.1)] text-[#ef4444]',
|
|
info: 'bg-[#e7f8f2] text-[#084cc8]',
|
|
process: 'bg-[rgba(245,158,11,0.1)] text-[#d97706]',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'success',
|
|
},
|
|
}
|
|
);
|
|
|
|
interface StatusBadgeProps extends VariantProps<typeof statusBadgeVariants> {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const statusDotColors = {
|
|
success: 'bg-[#059669]',
|
|
failure: 'bg-[#ef4444]',
|
|
info: 'bg-[#084cc8]',
|
|
process: 'bg-[#d97706]',
|
|
};
|
|
|
|
export const StatusBadge = ({
|
|
children,
|
|
variant = 'success',
|
|
className,
|
|
}: StatusBadgeProps): ReactElement => {
|
|
return (
|
|
<div className={cn(statusBadgeVariants({ variant }), className)}>
|
|
<div className={cn('rounded size-1.5 shrink-0', variant && statusDotColors[variant])} />
|
|
<span>{children}</span>
|
|
</div>
|
|
);
|
|
};
|