ansxor.ca
forked from
pds.ls/pdsls
atmosphere explorer
handle.invalid
1import { createSignal, JSX, Match, Show, Switch } from "solid-js";
2
3export const Favicon = (props: {
4 authority: string;
5 wrapper?: (children: JSX.Element) => JSX.Element;
6}) => {
7 const [loaded, setLoaded] = createSignal(false);
8 const domain = () => props.authority.split(".").reverse().join(".");
9
10 const content = (
11 <Switch>
12 <Match when={domain() === "tangled.sh"}>
13 <span class="iconify i-tangled size-4" />
14 </Match>
15 <Match when={["bsky.app", "bsky.chat"].includes(domain())}>
16 <img src="https://web-cdn.bsky.app/static/apple-touch-icon.png" class="size-4" />
17 </Match>
18 <Match when={true}>
19 <Show when={!loaded()}>
20 <span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />
21 </Show>
22 <img
23 src={`https://${domain()}/favicon.ico`}
24 class="size-4"
25 classList={{ hidden: !loaded() }}
26 onLoad={() => setLoaded(true)}
27 onError={() => setLoaded(false)}
28 />
29 </Match>
30 </Switch>
31 );
32
33 return props.wrapper ?
34 props.wrapper(content)
35 : <div class="flex h-5 w-4 shrink-0 items-center justify-center">{content}</div>;
36};