52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { ApprovalStatus, Priority, ActivityStatus, UserRole } from '../../types';
|
|
import {
|
|
getApprovalStatusBadge,
|
|
getPriorityBadge,
|
|
getActivityStatusBadge,
|
|
getUserRoleBadge,
|
|
} from '../../lib/formatters';
|
|
|
|
export const ApprovalStatusBadge: React.FC<{ status: ApprovalStatus | number | null | undefined }> = ({ status }) => {
|
|
const badge = getApprovalStatusBadge(status ?? ApprovalStatus.Pending);
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-semibold border whitespace-nowrap ${badge.className}`}>
|
|
{badge.dot && <span className={`w-1.5 h-1.5 rounded-full ${badge.dot}`} />}
|
|
<span>{badge.label}</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export const PriorityBadge: React.FC<{ priority: Priority | number | null | undefined }> = ({ priority }) => {
|
|
const badge = getPriorityBadge(priority ?? Priority.Medium);
|
|
return (
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-semibold border whitespace-nowrap ${badge.className}`}>
|
|
<span>{badge.label}</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export const ActivityStatusBadge: React.FC<{ status: ActivityStatus | number | string | boolean | null | undefined }> = ({ status }) => {
|
|
const badge = getActivityStatusBadge(status);
|
|
return (
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-semibold border whitespace-nowrap ${badge.className}`}>
|
|
<span>{badge.label}</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export const UserRoleBadge: React.FC<{ role: string | number | UserRole | null | undefined; className?: string }> = ({
|
|
role,
|
|
className = '',
|
|
}) => {
|
|
const badge = getUserRoleBadge(role);
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-medium border whitespace-nowrap ${badge.className} ${className}`}
|
|
>
|
|
{badge.dot && <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${badge.dot}`} />}
|
|
<span>{badge.label}</span>
|
|
</span>
|
|
);
|
|
};
|