atproto explorer pdsls.dev
atproto tool

update relay icons

Changed files
+10 -9
src
+1 -1
README.md
···
- Browse the public data on PDSes (Personal Data Servers).
- Login to manage records in your repository.
-
- Jetstream and firehose streaming.
+
- Jetstream and firehose (com.atproto.sync.subscribeRepos) streaming.
- Backlinks support with [constellation](https://constellation.microcosm.blue/).
- Query moderation labels.
+7 -6
src/layout.tsx
···
});
});
-
const NavButton = (props: { href: string; label: string }) => {
+
const NavButton = (props: { href: string; label: string; icon: string }) => {
return (
<A
href={props.href}
onClick={() => setShowMenu(false)}
-
class="rounded-lg p-1 hover:bg-neutral-200/50 active:bg-neutral-200/50 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
+
class="flex items-center gap-1 rounded-lg p-1 hover:bg-neutral-200/50 active:bg-neutral-200/50 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
>
-
{props.label}
+
<span class={"iconify " + props.icon}></span>
+
<span>{props.label}</span>
</A>
);
};
···
ref={setMenu}
class="dark:bg-dark-300 absolute top-8 right-0 z-20 flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 text-sm shadow-md dark:border-neutral-700"
>
-
<NavButton href="/jetstream" label="Jetstream" />
-
<NavButton href="/firehose" label="Firehose" />
-
<NavButton href="/settings" label="Settings" />
+
<NavButton href="/jetstream" label="Jetstream" icon="lucide--radio-tower" />
+
<NavButton href="/firehose" label="Firehose" icon="lucide--waves" />
+
<NavButton href="/settings" label="Settings" icon="lucide--settings" />
<ThemeSelection />
</div>
</Show>
+2 -2
src/views/stream.tsx
···
inactiveClass="border-transparent hover:border-neutral-400 dark:hover:border-neutral-600"
href="/jetstream"
>
-
<span class="iconify lucide--wind"></span>
+
<span class="iconify lucide--radio-tower"></span>
Jetstream
</A>
<A
···
inactiveClass="border-transparent hover:border-neutral-400 dark:hover:border-neutral-600"
href="/firehose"
>
-
<span class="iconify lucide--fire-extinguisher"></span>
+
<span class="iconify lucide--waves"></span>
Firehose
</A>
</div>