Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586<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 DollyCheck from "$lib/components/icons/DollyCheck.svelte"; 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 Radio from "$lib/components/ui/Radio.svelte"; import Tooltip from "$lib/components/ui/Tooltip.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"> <Radio value={host} bind:group={choice} name={kind}> {#if host === official} <span class="inline-flex items-center gap-xs"> Hosted by Tangled <span class="sr-only">({host})</span> <Tooltip content="Tangled operates this {kind} for you."> <DollyCheck aria-hidden="true" class="size-4" /> </Tooltip> </span> {:else} {host} {/if} </Radio> </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="ml-xl mt-2xs">Remember this {kind}</Checkbox> {/if}</div>