atproto explorer pdsls.dev
atproto tool

jetstream sticky form

Changed files
+9 -11
src
views
+9 -11
src/views/stream.tsx
···
import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
import { Button } from "../components/button";
import { JSONValue } from "../components/json";
import { TextInput } from "../components/text-input";
const LIMIT = 25;
···
Firehose
</A>
</div>
-
<form
-
ref={formRef}
-
class="dark:bg-dark-500 sticky top-0 z-5 flex w-screen flex-col items-center bg-neutral-100 px-4 text-sm"
-
>
-
<div class="flex w-[22rem] flex-col gap-2 py-3 sm:w-[24rem]">
<Show when={!connected()}>
-
<label class="flex items-center justify-end gap-x-2">
<span class="min-w-[5rem]">Instance</span>
<TextInput
name="instance"
···
/>
</label>
<Show when={streamType === StreamType.JETSTREAM}>
-
<label class="flex items-center justify-end gap-x-2">
<span class="min-w-[5rem]">Collections</span>
<textarea
name="collections"
···
</label>
</Show>
<Show when={streamType === StreamType.JETSTREAM}>
-
<label class="flex items-center justify-end gap-x-2">
<span class="min-w-[5rem]">DIDs</span>
<textarea
name="dids"
···
/>
</label>
</Show>
-
<label class="flex items-center justify-end gap-x-2">
<span class="min-w-[5rem]">Cursor</span>
<TextInput
name="cursor"
···
{connected() ? "Disconnect" : "Connect"}
</Button>
</div>
-
</div>
-
</form>
<Show when={notice().length}>
<div class="text-red-500 dark:text-red-400">{notice()}</div>
</Show>
···
import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
import { Button } from "../components/button";
import { JSONValue } from "../components/json";
+
import { StickyOverlay } from "../components/sticky";
import { TextInput } from "../components/text-input";
const LIMIT = 25;
···
Firehose
</A>
</div>
+
<StickyOverlay>
+
<form ref={formRef} class="flex w-[22rem] flex-col gap-1 text-sm sm:w-[24rem]">
<Show when={!connected()}>
+
<label class="flex items-center justify-end gap-x-1">
<span class="min-w-[5rem]">Instance</span>
<TextInput
name="instance"
···
/>
</label>
<Show when={streamType === StreamType.JETSTREAM}>
+
<label class="flex items-center justify-end gap-x-1">
<span class="min-w-[5rem]">Collections</span>
<textarea
name="collections"
···
</label>
</Show>
<Show when={streamType === StreamType.JETSTREAM}>
+
<label class="flex items-center justify-end gap-x-1">
<span class="min-w-[5rem]">DIDs</span>
<textarea
name="dids"
···
/>
</label>
</Show>
+
<label class="flex items-center justify-end gap-x-1">
<span class="min-w-[5rem]">Cursor</span>
<TextInput
name="cursor"
···
{connected() ? "Disconnect" : "Connect"}
</Button>
</div>
+
</form>
+
</StickyOverlay>
<Show when={notice().length}>
<div class="text-red-500 dark:text-red-400">{notice()}</div>
</Show>