Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at sl/gitmirror
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<script module lang="ts"> import { hostOf } from "$lib/api/preferences";
export const OTHER_SERVICE = "@other";
export const chosenHost = (choice: string, address: string): string => choice === OTHER_SERVICE ? hostOf(address) : choice;</script>
<script lang="ts"> import bonesRadioLoadingRow from "$lib/bones/bones-radio--loading-row.bones.json"; import Bones from "$lib/components/ui/Bones.svelte"; import Checkbox from "$lib/components/ui/Checkbox.svelte"; import Input from "$lib/components/ui/Input.svelte"; import { link } from "$lib/components/ui/Link.svelte"; import Radio from "$lib/components/ui/Radio.svelte";
interface Props { kind: "knot" | "spindle"; hosts: Promise<string[]>; official: string; none?: string; choice: string; address: string; remember: boolean; }
let { kind, hosts, official, none, choice = $bindable(), address = $bindable(), remember = $bindable() }: Props = $props();</script>
<div class="flex flex-col gap-2xs"> {#if none !== undefined} <div class="flex min-h-8 items-center"> <Radio value="" bind:group={choice} name={kind}>{none}</Radio> </div> {/if} {#await hosts} <div class="flex min-h-8 items-center"> <Bones capture={bonesRadioLoadingRow} class="w-36.25" /> </div> {:then list} {#each list as host (host)} <div class="flex min-h-8 items-center gap-xs"> <Radio value={host} bind:group={choice} name={kind}> {#if host === official} Hosted by Tangled. <span class="sr-only">({host})</span> {:else} {host} {/if} </Radio> {#if host === official} <a href="https://docs.tangled.org/{kind}s" target="_blank" rel="external noopener noreferrer" class={link({ class: "underline" })} > Learn more here. </a> {/if} </div> {/each} {/await}
<div class="flex min-h-8 items-center gap-xs"> <Radio value={OTHER_SERVICE} bind:group={choice} name={kind} aria-label="Another {kind}" /> <Input bind:value={address} placeholder="{kind}.example.com" aria-label="{kind === 'knot' ? 'Knot' : 'Spindle'} address" onfocus={() => (choice = OTHER_SERVICE)} class="w-full" /> </div> {#if choice === OTHER_SERVICE} <Checkbox bind:checked={remember} class="mt-2xs ml-xl">Remember this {kind}</Checkbox> {/if}</div>