trigger.dev/apps/webapp/app/components/primitives/Spinner.tsx at 0d39a9decb828d73452440cee8fdd569c2309af4 · triggerdotdev/trigger.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import { cn } from "~/utils/cn";

type CustomColor = {
  background: string;
  foreground: string;
};

export function Spinner({
  className,
  color = "blue",
}: {
  className?: string;
  color?: "blue" | "white" | "muted" | "dark" | CustomColor;
}) {
  const colors = {
    blue: {
      background: "rgba(59, 130, 246, 0.4)",
      foreground: "rgba(59, 130, 246)",
    },
    white: {
      background: "rgba(255, 255, 255, 0.4)",
      foreground: "rgba(255, 255, 255)",
    },
    muted: {
      background: "#1C2433",
      foreground: "#3C4B62",
    },
    dark: {
      background: "rgba(18, 19, 23, 0.35)",
      foreground: "#1A1B1F",
    },
  };

  const currentColor = typeof color === "string" ? colors[color] : color;

  return (
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={cn("animate-spin motion-reduce:hidden", className)}
    >
      <rect
        x="2"
        y="2"
        width="16"
        height="16"
        rx="8"
        stroke={currentColor.background}
        strokeWidth="3"
      />
      <path
        d="M10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2"
        stroke={currentColor.foreground}
        strokeWidth="3"
        strokeLinecap="round"
      />
    </svg>
  );
}

export function ButtonSpinner() {
  return (
    <Spinner
      className="size-3"
      color={{
        background: "rgba(255, 255, 255, 0.4)",
        foreground: "rgba(255, 255, 255)",
      }}
    />
  );
}

export function SpinnerWhite({ className }: { className?: string }) {
  return <Spinner className={className} color="white" />;
}