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

import Button from "@/components/button/button";
import Input from "@/components/input/input";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/sheet/sheet";
import SettingsSection from "@/pages/settings/settings-section";

export const ArgsSheet = ({
  show,
  value,
  originalValue,
  onClose,
  valueChanged,
  onAddArg,
  onRemoveArg,
}: {
  valueChanged: (value: string) => void;
  onClose: () => void;
  show: boolean;
  value: string;
  originalValue: string | undefined;
  onAddArg: (arg: string, originalValue: string | undefined) => void;
  onRemoveArg: (arg: string) => void;
}) => {
  return (
    <Sheet open={show} onOpenChange={onClose}>
      <SheetContent className="bg-[#242424] border-l-[#ffffff10] w-full">
        <SheetHeader className="text-left">
          <SheetTitle className="text-white">
            {originalValue !== "" ? "Edit argument" : "New argument"}
          </SheetTitle>
          <SheetDescription>
            {originalValue === ""
              ? "Add a new argument"
              : `Making changes to '${originalValue}'`}
          </SheetDescription>
        </SheetHeader>

        <SettingsSection marginTop="10px" noBottomSeparator>
          <div
            style={{ display: "flex", flexDirection: "column", gap: "10px" }}
          >
            <div>
              <Input
                withSaveButton placeholder="Example: use-kestrel"
                originalValue={originalValue}
                onSave={() => {
                  onAddArg(value, originalValue);
                  onClose();
                }}
                type="text"
                value={value}
                onChange={(e) => valueChanged(e.target.value)}
              />
            </div>
          </div>
        </SettingsSection>

        <SheetFooter className="flex flex-row gap-4">
          {originalValue && (
            <Button
              onClick={() => {
                onRemoveArg(originalValue);
                onClose();
              }}
              style={{
                width: "150px",
                whiteSpace: "nowrap",
                display: "flex",
                alignItems: "center",
                gap: "5px",
                justifyContent: "center",
              }}
              dangerButton
            >
              Delete
            </Button>
          )}
          <SheetClose asChild>
            <Button type="submit">Close</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
};