39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import type { SupportTicketStatus } from "@/types";
|
|
|
|
const STATUS_STYLES: Record<SupportTicketStatus, string> = {
|
|
// Open: blue, neutral attention.
|
|
open: "bg-blue-400/15 text-blue-400 border border-blue-400/20",
|
|
// In progress: amber, work happening.
|
|
in_progress: "bg-amber-400/15 text-amber-400 border border-amber-400/20",
|
|
// Waiting for customer: violet — distinct from in_progress so admins
|
|
// can quickly visually separate "I owe a response" from "they owe one".
|
|
waiting_for_customer:
|
|
"bg-violet-400/15 text-violet-400 border border-violet-400/20",
|
|
resolved: "bg-success/15 text-success border border-success/20",
|
|
// Reopened: red — flags admin attention because the previous
|
|
// resolution didn't stick.
|
|
reopened: "bg-red-400/15 text-red-400 border border-red-400/20",
|
|
};
|
|
|
|
/**
|
|
* Small status pill rendered on ticket list rows and detail header.
|
|
* Translated label, colour-coded by ticket lifecycle stage.
|
|
*/
|
|
export function TicketStatusBadge({
|
|
status,
|
|
}: {
|
|
status: SupportTicketStatus;
|
|
}) {
|
|
const t = useTranslations("support");
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full whitespace-nowrap ${STATUS_STYLES[status]}`}
|
|
>
|
|
{t(`status_${status}`)}
|
|
</span>
|
|
);
|
|
}
|