57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { ProjectStatus } from "@/types/project";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Configuración unificada de colores para estados de proyecto.
|
||
|
|
*
|
||
|
|
* Lógica de colores:
|
||
|
|
* - Borrador (0): Gris - Estado neutro, pendiente de activación
|
||
|
|
* - Abierto (1): Azul - Proyecto activo, en progreso
|
||
|
|
* - Cerrado (2): Verde - Proyecto completado exitosamente
|
||
|
|
*/
|
||
|
|
export const PROJECT_STATUS_CONFIG: Record<ProjectStatus, {
|
||
|
|
label: string;
|
||
|
|
lightClasses: string;
|
||
|
|
darkClasses: string;
|
||
|
|
}> = {
|
||
|
|
'0': {
|
||
|
|
label: "Borrador",
|
||
|
|
lightClasses: "bg-gray-100 text-gray-700 border-gray-300",
|
||
|
|
darkClasses: "dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600",
|
||
|
|
},
|
||
|
|
'1': {
|
||
|
|
label: "Abierto",
|
||
|
|
lightClasses: "bg-blue-100 text-blue-700 border-blue-300",
|
||
|
|
darkClasses: "dark:bg-blue-900/40 dark:text-blue-300 dark:border-blue-700",
|
||
|
|
},
|
||
|
|
'2': {
|
||
|
|
label: "Cerrado",
|
||
|
|
lightClasses: "bg-green-100 text-green-700 border-green-300",
|
||
|
|
darkClasses: "dark:bg-green-900/40 dark:text-green-300 dark:border-green-700",
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
interface ProjectStatusBadgeProps {
|
||
|
|
status: ProjectStatus;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Badge de estado de proyecto unificado.
|
||
|
|
* Usar este componente en toda la aplicación para mantener consistencia.
|
||
|
|
*/
|
||
|
|
export function ProjectStatusBadge({ status, className = "" }: ProjectStatusBadgeProps) {
|
||
|
|
const config = PROJECT_STATUS_CONFIG[status] || PROJECT_STATUS_CONFIG['0'];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Badge
|
||
|
|
variant="outline"
|
||
|
|
className={`${config.lightClasses} ${config.darkClasses} ${className}`}
|
||
|
|
>
|
||
|
|
{config.label}
|
||
|
|
</Badge>
|
||
|
|
);
|
||
|
|
}
|