atproto explorer pdsls.dev
atproto tool

move upload button

juli.ee 0925b4c2 c3c8a27f

verified
Changed files
+43 -37
src
components
+43 -37
src/components/create.tsx
···
</button>
</div>
<form ref={formRef} class="flex flex-col gap-y-2">
-
<div class="flex w-fit flex-col gap-y-1 text-xs sm:text-sm">
<Show when={props.create}>
<div class="flex items-center gap-x-2">
<label for="collection" class="min-w-20 select-none">
···
<option value="false">False</option>
</select>
</div>
-
<div class="dark:hover:bg-dark-200 dark:shadow-dark-800 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
-
<input
-
type="file"
-
id="blob"
-
class="sr-only"
-
ref={blobInput}
-
onChange={(e) => {
-
if (e.target.files !== null) setOpenUpload(true);
-
}}
-
/>
-
<label class="flex items-center gap-1 px-2 py-1.5 select-none" for="blob">
-
<span class="iconify lucide--upload"></span>
-
Upload
-
</label>
-
</div>
-
<Modal open={openUpload()} onClose={() => setOpenUpload(false)} closeOnClick={false}>
-
<FileUpload file={blobInput.files![0]} />
-
</Modal>
</div>
<Editor
content={JSON.stringify(props.create ? placeholder() : props.record, null, 2)}
/>
<div class="flex flex-col gap-2">
<Show when={notice()}>
-
<div class="text-red-500 dark:text-red-400">{notice()}</div>
</Show>
-
<div class="flex items-center justify-end gap-2">
-
<Show when={!props.create}>
-
<div class="flex items-center gap-1">
-
<input id="recreate" name="recreate" type="checkbox" />
-
<label for="recreate" class="text-sm select-none">
-
Recreate record
-
</label>
-
</div>
-
</Show>
-
<Button
-
onClick={() =>
-
props.create ?
-
createRecord(new FormData(formRef))
-
: editRecord(new FormData(formRef))
-
}
>
-
{props.create ? "Create" : "Edit"}
-
</Button>
</div>
</div>
</form>
···
</button>
</div>
<form ref={formRef} class="flex flex-col gap-y-2">
+
<div class="flex w-fit flex-col gap-y-1 text-sm">
<Show when={props.create}>
<div class="flex items-center gap-x-2">
<label for="collection" class="min-w-20 select-none">
···
<option value="false">False</option>
</select>
</div>
</div>
<Editor
content={JSON.stringify(props.create ? placeholder() : props.record, null, 2)}
/>
<div class="flex flex-col gap-2">
<Show when={notice()}>
+
<div class="text-sm text-red-500 dark:text-red-400">{notice()}</div>
</Show>
+
<div class="flex justify-between gap-2">
+
<div class="dark:hover:bg-dark-200 dark:shadow-dark-800 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
+
<input
+
type="file"
+
id="blob"
+
class="sr-only"
+
ref={blobInput}
+
onChange={(e) => {
+
if (e.target.files !== null) setOpenUpload(true);
+
}}
+
/>
+
<label class="flex items-center gap-1 px-2 py-1.5 select-none" for="blob">
+
<span class="iconify lucide--upload"></span>
+
Upload
+
</label>
+
</div>
+
<Modal
+
open={openUpload()}
+
onClose={() => setOpenUpload(false)}
+
closeOnClick={false}
>
+
<FileUpload file={blobInput.files![0]} />
+
</Modal>
+
<div class="flex items-center justify-end gap-2">
+
<Show when={!props.create}>
+
<div class="flex items-center gap-1">
+
<input id="recreate" name="recreate" type="checkbox" />
+
<label for="recreate" class="text-sm select-none">
+
Recreate record
+
</label>
+
</div>
+
</Show>
+
<Button
+
onClick={() =>
+
props.create ?
+
createRecord(new FormData(formRef))
+
: editRecord(new FormData(formRef))
+
}
+
>
+
{props.create ? "Create" : "Edit"}
+
</Button>
+
</div>
</div>
</div>
</form>