1import { CircleDot, CircleCheck } from "lucide-react";
 2
 3import { Status } from "@/__generated__/graphql";
 4import { cn } from "@/lib/utils";
 5
 6interface StatusBadgeProps {
 7  status: Status;
 8  className?: string;
 9}
10
11// Open / Closed status badge with icon. Used in BugDetailPage header.
12export function StatusBadge({ status, className }: StatusBadgeProps) {
13  const isOpen = status === Status.Open;
14
15  return (
16    <span
17      className={cn(
18        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
19        isOpen
20          ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
21          : "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400",
22        className,
23      )}
24    >
25      {isOpen ? <CircleDot className="size-3" /> : <CircleCheck className="size-3" />}
26      {isOpen ? "Open" : "Closed"}
27    </span>
28  );
29}