Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
3.4 kB · 92 lines
Svelte
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<script lang="ts"> // a mock of the new-repository form's name field: the account picker next to // the repository-name input, composed from the web app's own Field, Dropdown // and Input. the accounts are fake -- a personal account and an organization // -- and carry gradient avatars in place of the profile pictures the avatar // service would sign, so the docs build stays clear of that service. import Card from "$lib/components/ui/Card.svelte"; import Field from "$lib/components/ui/Field.svelte"; import Input from "$lib/components/ui/Input.svelte"; import Dropdown from "$lib/components/ui/Dropdown.svelte"; import DropdownItem from "$lib/components/ui/DropdownItem.svelte"; import Avatar from "$lib/components/ui/Avatar.svelte"; import ChevronDown from "$icon/chevron-down";
const gradient = (from: string, to: string): string => `data:image/svg+xml,${encodeURIComponent( `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${from}"/><stop offset="1" stop-color="${to}"/></linearGradient></defs><rect width="64" height="64" fill="url(#g)"/></svg>` )}`;
type Account = { did: string; handle: string; avatar: string };
const accounts: Account[] = [ { did: "did:plc:alice", handle: "alice.tngl.sh", avatar: gradient("#fb923c", "#f472b6") }, { did: "did:plc:organization", handle: "organization.tngl.sh", avatar: gradient("#6366f1", "#a855f7") } ];
let selectedDid = $state(accounts[0].did); let name = $state("my-project");
const selected = $derived(accounts.find((account) => account.did === selectedDid) ?? accounts[0]); const others = $derived(accounts.filter((account) => account.did !== selectedDid));</script>
<Card padding="regular" class="repo-creation-name not-content my-lg typography-paragraph-regular"> <Field label="Repository name" subtitle="Choose a unique, descriptive name. Use letters, numbers, periods, underscores, and hyphens." > {#snippet children({ id })} <div class="flex w-full flex-col gap-xs md:flex-row md:items-center md:gap-none"> <Dropdown variant="button" label="Repository owner {selected.handle}" title="Select an account" class="min-w-0 md:me-xs md:max-w-[55%]"> {#snippet trigger()} <span class="inline-flex min-w-0 items-center gap-1.5"> <Avatar src={selected.avatar} size="regular" /> <span class="min-w-0 truncate">{selected.handle}</span> </span> <ChevronDown class="ml-auto size-3.5 shrink-0" aria-hidden="true" /> {/snippet}
<div class="px-xs py-1.5 font-medium">Repository owner</div> {#each others as account (account.did)} <DropdownItem onclick={() => (selectedDid = account.did)}> <span class="inline-flex min-w-0 items-center gap-1.5"> <Avatar src={account.avatar} size="regular" /> <span class="min-w-0 truncate">{account.handle}</span> </span> </DropdownItem> {/each} </Dropdown> <Input {id} name="repo_name" placeholder="repository-name" maxlength={100} bind:value={name} class="flex-1" /> </div> {/snippet} </Field></Card>
<style> /* the field's subtitle is a `p`, which takes the markdown column's margins; give it back to the field */ :global(.repo-creation-name p) { margin: 0; }</style>