atmosphere explorer pds.ls
tool typescript atproto
Something went wrong. Try again.
2.7 kB · 84 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485import { Handle } from "@atcute/lexicons";import { createSignal, Show } from "solid-js";
import { resolveHandle } from "../../lib/api";import { Button } from "../button.jsx";import { TextInput } from "../text-input.jsx";
export const HandleInput = (props: { onInsert: (text: string) => void; onClose: () => void }) => { const [resolving, setResolving] = createSignal(false); const [error, setError] = createSignal(""); let handleFormRef!: HTMLFormElement;
const resolveDid = async (e: SubmitEvent) => { e.preventDefault(); const formData = new FormData(handleFormRef); const handleValue = formData.get("handle")?.toString().trim();
if (!handleValue) { setError("Please enter a handle"); return; }
setResolving(true); setError(""); try { const did = await resolveHandle(handleValue as Handle); props.onInsert(JSON.stringify(did)); props.onClose(); handleFormRef.reset(); } catch (err: any) { setError(err.message || "Failed to resolve handle"); } finally { setResolving(false); } };
return ( <> <h2 class="mb-2 font-semibold">Insert DID from handle</h2> <form ref={handleFormRef} onSubmit={resolveDid} class="flex flex-col gap-2 text-sm"> <div class="flex flex-col gap-1"> <label for="handle-input" class="select-none"> Handle </label> <TextInput id="handle-input" name="handle" placeholder="user.bsky.social" /> </div> <p class="text-xs text-neutral-600 dark:text-neutral-400"> DID will be pasted after the cursor </p> <Show when={error()}> <span class="text-red-500 dark:text-red-400">Error: {error()}</span> </Show> <div class="flex justify-between gap-2"> <Button type="button" onClick={() => { props.onClose(); handleFormRef.reset(); setError(""); }} > Cancel </Button> <Show when={resolving()}> <div class="flex items-center gap-1"> <span class="iconify lucide--loader-circle animate-spin"></span> <span>Resolving</span> </div> </Show> <Show when={!resolving()}> <Button type="submit" classList={{ "bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true, }} > Insert </Button> </Show> </div> </form> </> );};