feat: scaffold tickets experience

web/src/components/tickets/status-badge.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { ticketStatusSchema } from "@/lib/schemas/ticket"
+import { Badge } from "@/components/ui/badge"
+
+const statusConfig = {
+  NEW: { label: "Novo", className: "bg-slate-100 text-slate-700 border-transparent" },
+  OPEN: { label: "Aberto", className: "bg-blue-100 text-blue-700 border-transparent" },
+  PENDING: { label: "Pendente", className: "bg-amber-100 text-amber-700 border-transparent" },
+  ON_HOLD: { label: "Em espera", className: "bg-purple-100 text-purple-700 border-transparent" },
+  RESOLVED: { label: "Resolvido", className: "bg-emerald-100 text-emerald-700 border-transparent" },
+  CLOSED: { label: "Fechado", className: "bg-slate-100 text-slate-700 border-transparent" },
+} satisfies Record<(typeof ticketStatusSchema)["_type"], { label: string; className: string }>
+
+type TicketStatusBadgeProps = {
+  status: (typeof ticketStatusSchema)["_type"]
+}
+
+export function TicketStatusBadge({ status }: TicketStatusBadgeProps) {
+  const config = statusConfig[status]
+  return (
+    <Badge
+      variant="outline"
+      className={`rounded-full px-2.5 py-1 text-xs font-medium ${config?.className ?? ""}`}
+    >
+      {config?.label ?? status}
+    </Badge>
+  )
+}