Status Badge

A status badge for task items.

Open

1
import { useState } from "react";
2

3
import { StatusBadge } from "@/components/features/pxl/tasks/status-badge";
4

5
export default function StatusBadgeDemo() {
6
  const [status, setStatus] = useState<"open" | "in-progress" | "done">("open");
7

8
  const toggle = () => {
9
    setStatus(
10
      status === "open"
11
        ? "in-progress"
12
        : status === "in-progress"
13
          ? "done"
14
          : "open",
15
    );
16
  };
17

18
  return (
19
    <div className="flex flex-col gap-4">
20
      <StatusBadge onClick={toggle} value={status} />
21
    </div>
22
  );
23
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/tasks/status-badge

Copy and paste the following code into your project.

1
import type { ComponentProps, SVGProps } from "react";
2

3
import { Badge } from "@/components/ui/pxl/badge";
4
import type { TaskNotes } from "@/lib/schemas/pxl/tasknotes";
5

6
type Status = "open" | "in-progress" | "done";
7

8
const statusVariants: Record<
9
  Status,
10
  NonNullable<ComponentProps<typeof Badge>["variant"]>
11
> = {
12
  open: "muted",
13
  done: "success",
14
  "in-progress": "primary",
15
};
16

17
const statusLabels: Record<
18
  Status,
19
  string
20
> = {
21
  open: "Open",
22
  done: "Done",
23
  "in-progress": "In Progress"
24
};
25

26

27

28
const StatusIcon = {
29
  Open(props: SVGProps<SVGSVGElement>) {
30
    return (
31
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
32
        {...props}><path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"/></svg>
33
    )
34
  },
35
  InProgress(props: SVGProps<SVGSVGElement>) {
36
    return (
37
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
38
      {...props}><path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-5-1h-2v-2h2v2Zm-2-2h-2v-2h2v2Zm-2-2h-2V6h2v7ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"/></svg>
39
    );
40
  },
41
  Done(props: SVGProps<SVGSVGElement>) {
42
    return (
43
      <svg
44
        xmlns="http://www.w3.org/2000/svg"
45
        fill="currentColor" viewBox="0 0 24 24"
46
        {...props}>
47
        <path d="M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z"/>
48
      </svg>
49
    );
50
  },
51
};
52

53
function StatusBadge({
54
  labels = statusLabels,
55
  showLabel = true,
56
  value,
57
  ...props
58
}: ComponentProps<typeof Badge> & {
59
  labels?: Record<Status, string>;
60
  showLabel?: boolean;
61
  value: Status;
62
}) {
63
  return (
64
    <Badge variant={statusVariants[value]} {...props}>
65
      {value === "open" && <StatusIcon.Open className="size-3 mr-1" />}
66
      {value === "in-progress" && (<StatusIcon.InProgress className="size-3 mr-1" />)}
67
      {value === "done" && <StatusIcon.Done className="size-3 mr-1" />}
68
      {showLabel && labels[value]}
69
    </Badge>
70
  );
71
}
72

73
function TaskNotesStatusBadge({
74
  task,
75
  ...props
76
}: ComponentProps<typeof StatusBadge> & {
77
  task: TaskNotes.Task;
78
}) {
79
  return <StatusBadge {...props} value={task.status === "none" ? "open" : task.status} />;
80
}
81
StatusBadge.TaskNotes = TaskNotesStatusBadge;
82

83
export { StatusBadge };

Update the import paths to match your project setup.

Usage

import { StatusBadge } from "@/components/features/pxl/tasks/status-badge";

<StatusBadge value="in-progress" />