johnandersen777.bsky.social/knotless
git that lives in your Atmosphere account
Forked from chadtmiller.com/knotless
0
0
<script lang="ts" module>
/** A link as a form holds it: its address and title as typed, either possibly empty. */
export type TypedLink = { url: string; title: string };
/** `links` as written: those with an address, each trimmed, a title left out when empty. */
export const typed = (links: TypedLink[]) =>
links
.filter((l) => l.url.trim())
.map((l) => ({ url: l.url.trim(), title: l.title.trim() || undefined }));
</script>
<script lang="ts">
/** The rows of a form's `links`, an address and a title each, to change, take out, or add to while there are fewer than `max`. */
let { links = $bindable(), max }: { links: TypedLink[]; max: number } = $props();
</script>
{#each links as link, i (i)}
<div class="link-row">
<input
type="url"
aria-label="Link {i + 1}'s address"
placeholder="https://"
bind:value={link.url}
/>
<input
aria-label="Link {i + 1}'s title"
maxlength="40"
placeholder="Title (optional)"
bind:value={link.title}
/>
<button
class="btn"
type="button"
aria-label="Remove link {i + 1}"
onclick={() => links.splice(i, 1)}>Remove</button
>
</div>
{/each}
{#if links.length < max}<button
class="btn"
type="button"
onclick={() => links.push({ url: '', title: '' })}>Add a link</button
>{/if}