66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { Badge } from "@repo/shadcn-ui/components";
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
|
import { forwardRef } from "react";
|
|
import { useTranslation } from "../i18n";
|
|
|
|
export type CustomerStatus = "draft" | "emitted" | "sent" | "received" | "rejected";
|
|
|
|
export type CustomerStatusBadgeProps = {
|
|
status: string; // permitir cualquier valor
|
|
className?: string;
|
|
};
|
|
|
|
const statusColorConfig: Record<CustomerStatus, { badge: string; dot: string }> = {
|
|
draft: {
|
|
badge:
|
|
"bg-gray-600/10 dark:bg-gray-600/20 hover:bg-gray-600/10 text-gray-500 border-gray-600/60",
|
|
dot: "bg-gray-500",
|
|
},
|
|
emitted: {
|
|
badge:
|
|
"bg-amber-600/10 dark:bg-amber-600/20 hover:bg-amber-600/10 text-amber-500 border-amber-600/60",
|
|
dot: "bg-amber-500",
|
|
},
|
|
sent: {
|
|
badge:
|
|
"bg-cyan-600/10 dark:bg-cyan-600/20 hover:bg-cyan-600/10 text-cyan-500 border-cyan-600/60 shadow-none rounded-full",
|
|
dot: "bg-cyan-500",
|
|
},
|
|
received: {
|
|
badge:
|
|
"bg-emerald-600/10 dark:bg-emerald-600/20 hover:bg-emerald-600/10 text-emerald-500 border-emerald-600/60",
|
|
dot: "bg-emerald-500",
|
|
},
|
|
rejected: {
|
|
badge: "bg-red-600/10 dark:bg-red-600/20 hover:bg-red-600/10 text-red-500 border-red-600/60",
|
|
dot: "bg-red-500",
|
|
},
|
|
};
|
|
|
|
export const CustomerStatusBadge = forwardRef<HTMLDivElement, CustomerStatusBadgeProps>(
|
|
({ status, className, ...props }, ref) => {
|
|
const { t } = useTranslation();
|
|
const normalizedStatus = status.toLowerCase() as CustomerStatus;
|
|
const config = statusColorConfig[normalizedStatus];
|
|
const commonClassName =
|
|
"transition-colors duration-200 cursor-pointer shadow-none rounded-full";
|
|
|
|
if (!config) {
|
|
return (
|
|
<Badge ref={ref} className={cn(commonClassName, className)} {...props}>
|
|
{status}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Badge className={cn(commonClassName, config.badge, className)} {...props}>
|
|
<div className={cn("h-1.5 w-1.5 rounded-full mr-2", config.dot)} />
|
|
{t(`status.${status}`)}
|
|
</Badge>
|
|
);
|
|
}
|
|
);
|
|
|
|
CustomerStatusBadge.displayName = "CustomerStatusBadge";
|