Scheduled 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
const scheduledVariants: Record<
7
  "default" | "incoming" | "expired",
8
  NonNullable<ComponentProps<typeof Badge>["variant"]>
9
> = {
10
  default: "muted",
11
  incoming: "warning",
12
  expired: "danger"
13
}
14

15
function formatScheduled(date: string | Date | number, locale?: string): string {
16
  if (typeof date === "string" && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
17
    const [year, month, day] = date.split("-").map(Number);
18

19
    return new Intl.DateTimeFormat(locale, {
20
      day: "2-digit",
21
      month: "2-digit",
22
      year: "numeric",
23
    }).format(new Date(year, month - 1, day));
24
  }
25

26
  const value = new Date(date);
27

28
  if (Number.isNaN(value.getTime())) {
29
    return "";
30
  }
31

32
  return new Intl.DateTimeFormat(locale, {
33
    day: "2-digit",
34
    month: "2-digit",
35
    year: "numeric",
36
    hour: "2-digit",
37
    minute: "2-digit",
38
  }).format(value);
39
}
40

41
function getScheduledVariant(
42
  date: string | Date | number,
43
): ComponentProps<typeof Badge>["variant"] {
44
  const scheduled = new Date(date).getTime();
45
  const now = Date.now();
46

47
  if (Number.isNaN(scheduled)) {
48
    return scheduledVariants.default;
49
  }
50

51
  if (scheduled < now) {
52
    return scheduledVariants.expired;
53
  }
54

55
  const threeDays = 3 * 24 * 60 * 60 * 1000;
56

57
  if (scheduled <= now + threeDays) {
58
    return scheduledVariants.incoming;
59
  }
60

61
  return scheduledVariants.default;
62
}
63

64
function ScheduledBadge({
65
  locale,
66
  value,
67
  ...props
68
}: ComponentProps<typeof Badge> & {
69
  locale?: string;
70
  value: string | Date | number;
71
}) {
72
  return (
73
    <Badge variant={getScheduledVariant(value)} {...props}>
74
      <svg
75
        xmlns="http://www.w3.org/2000/svg"
76
        fill="currentColor"
77
        viewBox="0 0 24 24"
78
        className="size-3 mr-1"
79
      >
80
        <path d="M21 23h-8v-2h8v2ZM9 21H3v-2h6v2Zm4 0h-2v-8h2v8Zm10 0h-2v-8h2v8ZM3 7h14V5h2v4H3v10H1V5h2v2Zm15 10h2v2h-2v-1h-2v-4h2v3Zm3-4h-8v-2h8v2ZM7 3h6V1h2v2h2v2H3V3h2V1h2v2Z" />
81
      </svg>
82
      {formatScheduled(value, locale)}
83
    </Badge>
84
  );
85
}
86

87
function TaskNotesScheduledBadge({
88
  task,
89
  ...props
90
}: ComponentProps<typeof ScheduledBadge> & {
91
  task: TaskNotes.Task;
92
}) {
93
  return task.scheduled && <ScheduledBadge {...props} value={task.scheduled} />;
94
}
95
ScheduledBadge.TaskNotes = TaskNotesScheduledBadge;
96

97
export { ScheduledBadge };