Project Badge

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

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

6
function ProjectBadge({
7
  children,
8
  ...props
9
}: ComponentProps<typeof Badge>) {
10
  return (
11
    <Badge variant="muted" {...props}>
12
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
13
        className="size-3 mr-0.5"><path d="M20 20H4v-2h16v2ZM4 18H2V6h2v12Zm18 0h-2V8h2v10ZM20 8H10V6H4V4h8v2h8v2Z"/></svg>
14
      {children}
15
    </Badge>
16
  );
17
}
18

19
function TaskNotesProjectBadge({
20
  task,
21
  ...props
22
}: ComponentProps<typeof ProjectBadge> & {
23
  task: TaskNotes.Task;
24
}) {
25
  if (!task.projects || task.projects.length === 0) {
26
    return null;
27
  }
28
  return <ProjectBadge {...props}>{task.projects.join(", ")}</ProjectBadge>;
29
}
30
ProjectBadge.TaskNotes = TaskNotesProjectBadge;
31

32
export { ProjectBadge };