forked from
pds.ls/pdsls
atproto explorer
1import { createSignal, Show } from "solid-js";
2import { Button } from "../button.jsx";
3
4export const ConfirmSubmit = (props: {
5 isCreate: boolean;
6 onConfirm: (validate: boolean | undefined, recreate: boolean) => void;
7 onClose: () => void;
8}) => {
9 const [validate, setValidate] = createSignal<boolean | undefined>(undefined);
10 const [recreate, setRecreate] = createSignal(false);
11
12 const getValidateLabel = () => {
13 return (
14 validate() === true ? "True"
15 : validate() === false ? "False"
16 : "Unset"
17 );
18 };
19
20 const cycleValidate = () => {
21 setValidate(
22 validate() === undefined ? true
23 : validate() === true ? false
24 : undefined,
25 );
26 };
27
28 return (
29 <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[24rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
30 <div class="flex flex-col gap-3 text-sm">
31 <h2 class="font-semibold">{props.isCreate ? "Create" : "Edit"} record</h2>
32 <div class="flex flex-col gap-1.5">
33 <div class="flex items-center gap-2">
34 <button
35 type="button"
36 class="-ml-2 flex min-w-30 items-center gap-1.5 rounded-lg px-2 py-1 text-xs hover:bg-neutral-200/50 dark:hover:bg-neutral-700"
37 onClick={cycleValidate}
38 >
39 <span
40 classList={{
41 iconify: true,
42 "lucide--square-check text-green-500 dark:text-green-400": validate() === true,
43 "lucide--square-x text-red-500 dark:text-red-400": validate() === false,
44 "lucide--square text-neutral-500 dark:text-neutral-400": validate() === undefined,
45 }}
46 ></span>
47 <span>Validate: {getValidateLabel()}</span>
48 </button>
49 </div>
50 <p class="text-xs text-neutral-600 dark:text-neutral-400">
51 Set to 'false' to skip lexicon schema validation by the PDS, 'true' to require it, or
52 leave unset to validate only for known lexicons.
53 </p>
54 </div>
55 <Show when={!props.isCreate}>
56 <div class="flex flex-col gap-1.5">
57 <div class="flex items-center gap-2">
58 <button
59 type="button"
60 class="-ml-2 flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs hover:bg-neutral-200/50 dark:hover:bg-neutral-700"
61 onClick={() => setRecreate(!recreate())}
62 >
63 <span
64 classList={{
65 iconify: true,
66 "lucide--square-check text-green-500 dark:text-green-400": recreate(),
67 "lucide--square text-neutral-500 dark:text-neutral-400": !recreate(),
68 }}
69 ></span>
70 <span>Recreate</span>
71 </button>
72 </div>
73 <p class="text-xs text-neutral-600 dark:text-neutral-400">
74 Delete the existing record and create a new one with the same record key.
75 </p>
76 </div>
77 </Show>
78 <div class="flex justify-between gap-2">
79 <Button onClick={props.onClose}>Cancel</Button>
80 <Button
81 onClick={() => props.onConfirm(validate(), recreate())}
82 class="dark:shadow-dark-700 min-w-12 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"
83 >
84 {props.isCreate ? "Create" : "Edit"}
85 </Button>
86 </div>
87 </div>
88 </div>
89 );
90};