ID 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 IdBadge({
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="M14 14v-4h-4v4h4Zm7 2h-6v5h-2v-5H9v5H7v-5H3v-2h5v-4H3V8h6V3h2v5h4V3h2v5h4v2h-5v4h5v2Z"/></svg>
14
      {children}
15
    </Badge>
16
  );
17
}
18

19
function TaskNotesIdBadge({
20
  task,
21
  ...props
22
}: ComponentProps<typeof IdBadge> & {
23
  task: TaskNotes.Task;
24
}) {
25
  return <IdBadge {...props}>{task.id}</IdBadge>;
26
}
27
IdBadge.TaskNotes = TaskNotesIdBadge;
28

29
export { IdBadge };