vielle.dev
forked from
pds.ls/pdsls
atproto explorer
move upload button
juli.ee
+43
-37
src/components/create.tsx
+43
-37
src/components/create.tsx
···
243
243
</button>
244
244
</div>
245
245
<form ref={formRef} class="flex flex-col gap-y-2">
246
-
<div class="flex w-fit flex-col gap-y-1 text-xs sm:text-sm">
246
+
<div class="flex w-fit flex-col gap-y-1 text-sm">
247
247
<Show when={props.create}>
248
248
<div class="flex items-center gap-x-2">
249
249
<label for="collection" class="min-w-20 select-none">
···
282
282
<option value="false">False</option>
283
283
</select>
284
284
</div>
285
-
<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">
286
-
<input
287
-
type="file"
288
-
id="blob"
289
-
class="sr-only"
290
-
ref={blobInput}
291
-
onChange={(e) => {
292
-
if (e.target.files !== null) setOpenUpload(true);
293
-
}}
294
-
/>
295
-
<label class="flex items-center gap-1 px-2 py-1.5 select-none" for="blob">
296
-
<span class="iconify lucide--upload"></span>
297
-
Upload
298
-
</label>
299
-
</div>
300
-
<Modal open={openUpload()} onClose={() => setOpenUpload(false)} closeOnClick={false}>
301
-
<FileUpload file={blobInput.files![0]} />
302
-
</Modal>
303
285
</div>
304
286
<Editor
305
287
content={JSON.stringify(props.create ? placeholder() : props.record, null, 2)}
306
288
/>
307
289
<div class="flex flex-col gap-2">
308
290
<Show when={notice()}>
309
-
<div class="text-red-500 dark:text-red-400">{notice()}</div>
291
+
<div class="text-sm text-red-500 dark:text-red-400">{notice()}</div>
310
292
</Show>
311
-
<div class="flex items-center justify-end gap-2">
312
-
<Show when={!props.create}>
313
-
<div class="flex items-center gap-1">
314
-
<input id="recreate" name="recreate" type="checkbox" />
315
-
<label for="recreate" class="text-sm select-none">
316
-
Recreate record
317
-
</label>
318
-
</div>
319
-
</Show>
320
-
<Button
321
-
onClick={() =>
322
-
props.create ?
323
-
createRecord(new FormData(formRef))
324
-
: editRecord(new FormData(formRef))
325
-
}
293
+
<div class="flex justify-between gap-2">
294
+
<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">
295
+
<input
296
+
type="file"
297
+
id="blob"
298
+
class="sr-only"
299
+
ref={blobInput}
300
+
onChange={(e) => {
301
+
if (e.target.files !== null) setOpenUpload(true);
302
+
}}
303
+
/>
304
+
<label class="flex items-center gap-1 px-2 py-1.5 select-none" for="blob">
305
+
<span class="iconify lucide--upload"></span>
306
+
Upload
307
+
</label>
308
+
</div>
309
+
<Modal
310
+
open={openUpload()}
311
+
onClose={() => setOpenUpload(false)}
312
+
closeOnClick={false}
326
313
>
327
-
{props.create ? "Create" : "Edit"}
328
-
</Button>
314
+
<FileUpload file={blobInput.files![0]} />
315
+
</Modal>
316
+
<div class="flex items-center justify-end gap-2">
317
+
<Show when={!props.create}>
318
+
<div class="flex items-center gap-1">
319
+
<input id="recreate" name="recreate" type="checkbox" />
320
+
<label for="recreate" class="text-sm select-none">
321
+
Recreate record
322
+
</label>
323
+
</div>
324
+
</Show>
325
+
<Button
326
+
onClick={() =>
327
+
props.create ?
328
+
createRecord(new FormData(formRef))
329
+
: editRecord(new FormData(formRef))
330
+
}
331
+
>
332
+
{props.create ? "Create" : "Edit"}
333
+
</Button>
334
+
</div>
329
335
</div>
330
336
</div>
331
337
</form>