forked from
pds.ls/pdsls
atmosphere explorer
menu component
+23
-16
+23
-16
src/components/create.tsx
+23
-16
src/components/create.tsx
···
183
183
setOpenInsertMenu(false);
184
184
};
185
185
186
+
const MenuItem = (props: { icon: string; label: string; onClick: () => void }) => {
187
+
return (
188
+
<button
189
+
type="button"
190
+
class="flex items-center gap-2 rounded-lg p-2 text-left text-xs hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
191
+
onClick={props.onClick}
192
+
>
193
+
<span class={`iconify ${props.icon}`}></span>
194
+
<span>{props.label}</span>
195
+
</button>
196
+
);
197
+
};
198
+
186
199
const FileUpload = (props: { file: File }) => {
187
200
const [uploading, setUploading] = createSignal(false);
188
201
const [error, setError] = createSignal("");
···
381
394
<div class="relative" ref={insertMenuRef}>
382
395
<button
383
396
type="button"
384
-
class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
397
+
class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-1.5 text-base shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
385
398
onClick={() => setOpenInsertMenu(!openInsertMenu())}
386
399
>
387
400
<span class="iconify lucide--plus select-none"></span>
388
401
</button>
389
402
<Show when={openInsertMenu()}>
390
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute bottom-full left-0 mb-1 flex w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 shadow-md dark:border-neutral-700 z-10">
391
-
<button
392
-
type="button"
393
-
class="flex items-center gap-2 px-3 py-2 text-left text-xs hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 rounded-t-lg"
403
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute bottom-full left-0 z-10 mb-1 flex w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-1.5 shadow-md dark:border-neutral-700">
404
+
<MenuItem
405
+
icon="lucide--upload"
406
+
label="Upload blob"
394
407
onClick={() => {
395
408
setOpenInsertMenu(false);
396
409
blobInput.click();
397
410
}}
398
-
>
399
-
<span class="iconify lucide--upload"></span>
400
-
<span>Upload blob</span>
401
-
</button>
402
-
<button
403
-
type="button"
404
-
class="flex items-center gap-2 px-3 py-2 text-left text-xs hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 rounded-b-lg"
411
+
/>
412
+
<MenuItem
413
+
icon="lucide--clock"
414
+
label="Insert timestamp"
405
415
onClick={insertTimestamp}
406
-
>
407
-
<span class="iconify lucide--clock"></span>
408
-
<span>Insert timestamp</span>
409
-
</button>
416
+
/>
410
417
</div>
411
418
</Show>
412
419
<input