Status Toggle

1
import { Button } from "@base-ui/react/button";
2
import { cva, type VariantProps } from "class-variance-authority";
3
import type { ComponentProps, SVGProps } from "react";
4

5
import type { TaskNotes } from "@/lib/schemas/pxl/tasknotes";
6
import { cn } from "@/lib/utils";
7

8
const statusToggleVariants = cva(
9
  "group/button inline-flex shrink-0 items-center justify-center bg-clip-padding font-medium whitespace-nowrap outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='fill-'])]:fill-current pixel-border pixel-color-foreground pixel-size-md transition-all animation-duration-1000 hover:animate-pulse",
10
  {
11
    defaultVariants: {
12
      size: "icon",
13
    },
14
    variants: {
15
      size: {
16
        icon: "size-4",
17
        "icon-xs": "size-3",
18
        "icon-sm": "size-3.5",
19
        "icon-md": "size-4",
20
        "icon-lg": "size-4.5",
21
      },
22
    },
23
  },
24
);
25

26
const ToggleIcon = {
27
  InProgress(props: SVGProps<SVGSVGElement>) {
28
    return (
29
      <svg fill="currentColor" viewBox="0 0 24 24"
30
        {...props}>
31
        <path d="M14 16h-4v-2h4v2Zm-4-2H8v-4h2v4Zm6 0h-2v-4h2v4Zm-2-4h-4V8h4v2Z" />
32
      </svg>
33
    );
34
  },
35
  Done(props: SVGProps<SVGSVGElement>) {
36
    return (
37
      <svg
38
        xmlns="http://www.w3.org/2000/svg"
39
        fill="currentColor" viewBox="0 0 24 24"
40
        {...props}>
41
        <path d="M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z"/>
42
      </svg>
43
    );
44
  },
45
};
46

47
function StatusToggle({
48
  size = "icon",
49
  value = "open",
50
  ...props
51
}: Button.Props &
52
  VariantProps<typeof statusToggleVariants> & {
53
    value: "open" | "in-progress" | "done";
54
  }) {
55
  return (
56
    <Button
57
      type="button"
58
      data-slot="button"
59
      data-size={size}
60
      className={cn(statusToggleVariants({ size }))}
61
      {...props}
62
    >
63
      {value === "in-progress" && (<ToggleIcon.InProgress className="size-full" />)}
64
      {value === "done" && <ToggleIcon.Done className="size-full" />}
65
    </Button>
66
  );
67
}
68

69
function TaskNotesStatusToggle({
70
  task,
71
  ...props
72
}: VariantProps<typeof statusToggleVariants> & {
73
  task: TaskNotes.Task;
74
}) {
75
  return (
76
    <StatusToggle
77
      {...props}
78
      value={task.status === "none" ? "open" : task.status}
79
    />
80
  );
81
}
82
StatusToggle.TaskNotes = TaskNotesStatusToggle;
83

84
export { StatusToggle };