odd-box 0.1.10

a dead simple reverse proxy server and web server
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

import { useState } from "react";
import toast from "react-hot-toast";
import useSiteMutations from "../../hooks/use-site-mutations";
import { ProcState } from "../../generated-api";
import { Popover, PopoverContent } from "../popover/popover";
import { PopoverTrigger } from "@radix-ui/react-popover";
import { cx } from "class-variance-authority";

const statusColors = {
  Running: "#27e72e",
  Stopped: "var(--color1)",
  Disabled: "gray",
  Stopping: "yellow",
  Starting: "yellow",
  Remote: "white",
  Faulty: "yellow",
  DirServer: "white",
  Docker: "white"
};

const StatusIcon = ({
  hostname,
  state
}: {
  state?: ProcState;
  hostname: string;
}) => {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const { startSite, stopSite } = useSiteMutations();

  return (
    <Popover open={isPopoverOpen}>
      <PopoverTrigger asChild>
        <span
          className="w-7 h-7 p-0 rounded-[5px] grid place-content-center cursor-pointer transition-all duration-100 border border-transparent hover:border-white/50"
          title={state}
          onClick={(e) => {
            e.preventDefault();
            setIsPopoverOpen(true);
          }}
          style={{
            color: statusColors[state!],
            fontSize: "1rem",
          }}
        >
          {"●"}
        </span>
      </PopoverTrigger>
      <PopoverContent
        onInteractOutside={() => setIsPopoverOpen(false)}
        onClick={() => setIsPopoverOpen(false)}
        className="max-w-[max-content] border bg-white text-black"
      >
        <div
          style={{
            background: "white",
            marginTop: "1px",
            borderRadius: "4px",
            overflow: "hidden",
          }}
        >
          <button
            disabled={state === ProcState.Running}
            onClick={() => {
              toast.promise(startSite.mutateAsync({ hostname }), {
                loading: `Starting site.. [${hostname}]`,
                success: `Site started! [${hostname}]`,
                error: (e) => `Failed to start site: ${e}`,
              });
            }}
            className={cx("button-dropdown-option", state === ProcState.Running && "opacity-50")}
            style={{
              width: "100%",
              borderBottom: "1px solid var(--color4)",
              height: "36px",
            }}
          >
            Start site
          </button>

          <button
            disabled={state !== ProcState.Running}
            onClick={() => {
              toast.promise(stopSite.mutateAsync({ hostname }), {
                loading: `Stopping site.. [${hostname}]`,
                success: `Site stopped! [${hostname}]`,
                error: (e) => `Failed to stop site: ${e}`,
              });
            }}
            className={cx("button-dropdown-option",state !== ProcState.Running && "opacity-50")}
            style={{
              width: "100%",
              height: "36px",
              borderBottom: "1px solid var(--color4)",
            }}
          >
            Stop site
          </button>
        </div>
      </PopoverContent>
    </Popover>
  );
};

export default StatusIcon;