Components · Tangled

Components · Tangled {#snippet button()}

{/snippet} {#snippet input()}

{/snippet} {#snippet selectDemo()}

{/snippet}

{/snippet} {#snippet modal()} {#snippet footer()} {/snippet} {/snippet} {#snippet tooltip()}

{/snippet} {#snippet actionsTrigger()} Actions {/snippet} {#snippet dropdown()} Edit Settings Sign out {/snippet} {#snippet checkbox()}

Sign commits Some files Disabled

{/snippet} {#snippet card()}

tangled.org/core

Monorepo for Tangled

{/snippet} {#snippet spinner()}

{/snippet} {#snippet bones()} {/snippet} {#snippet tag()}

Default Gray Passed Failed Timed out Primary topic

{/snippet} {#snippet error()}

{/snippet} {#snippet tabsDemo()}

{/snippet} {#snippet confirmModal()} (confirmOpen = false)} /> {/snippet} {#snippet pagination()} {/snippet} {#snippet textarea()}

{/snippet}

{#snippet tagInput()}
	<div class="w-full max-w-64">
		<Input
			rich
			bind:tags
			suggestions={people}
			label="Reviewers"
			placeholder="Add a reviewer"
			hint="Pick from the list, or type a handle"
			emptyLabel="No one left to add"
		>
			{#snippet tag(t)}
				<User
					handle={t.value}
					did={team.find((m) => m.handle === t.value)?.did}
					link={false}
				/>
			{/snippet}
			{#snippet suggestion(t)}
				<User
					handle={t.value}
					did={team.find((m) => m.handle === t.value)?.did}
					link={false}
				/>
			{/snippet}
		</Input>
	</div>
{/snippet}

{#snippet avatar()}
	<div class="flex flex-col items-center gap-md">
		<div class="flex items-end gap-sm">
			{#each ["mini", "small", "regular", "large"] as const as size, i (size)}
				<Avatar handle={team[i].handle} did={team[i].did} {size} />
			{/each}
		</div>
		<div class="flex items-center gap-xs">
			{#each team as member (member.handle)}
				<Avatar handle={member.handle} did={member.did} size="large" />
			{/each}
		</div>
	</div>
{/snippet}

{#snippet user()}
	<div class="flex flex-col items-start gap-sm">
		{#each team as member (member.handle)}
			<User handle={member.handle} did={member.did} />
		{/each}
	</div>
{/snippet}

{#snippet kbd()}
	<div class="flex flex-col items-center gap-sm">
		<span class="inline-flex items-center gap-3xs"><Kbd>⌘</Kbd><Kbd>K</Kbd></span>
		<span class="inline-flex items-center gap-3xs"
			><Kbd>Ctrl</Kbd><Kbd>Shift</Kbd><Kbd>Enter</Kbd></span
		>
	</div>
{/snippet}

{#snippet link()}
	<div class="flex flex-col gap-xs">
		<Link href={resolve("/")}>Default link</Link>
		<Link variant="danger" href={resolve("/")}>Danger link</Link>
		<Link iconRight={ArrowRight} href={resolve("/")}>Continue</Link>
		<Link disabled>Disabled link</Link>
	</div>
{/snippet}

{#snippet copyButton()}
	<div
		class="flex w-full max-w-72 items-center gap-xs rounded-md border border-border-default p-2xs pl-sm"
	>
		<code class="min-w-0 flex-1 truncate typography-monospace-small text-foreground-muted"
			>{sha}</code
		>
		<CopyButton value={sha} label="Copy SHA" showLabel />
	</div>
{/snippet}

{#snippet splitButton()}
	<SplitButton
		variant="primary"
		options={[
			{ label: "Rebase & merge", icon: GitMerge },
			{ label: "Manually mark as merged", buttonLabel: "Merge manually", icon: CircleCheck },
			{ label: "Close without merging", icon: Trash2, danger: true }
		]}
	/>
{/snippet}

{#snippet moreMenu()}
	<MoreMenu label="More actions for @oppi.li" buttonVariant="default">
		<DropdownItem icon={Rss}>RSS feed</DropdownItem>
		<DropdownItem icon={TriangleAlert} danger>Report user</DropdownItem>
	</MoreMenu>
{/snippet}

{#snippet hovercardBody()}
	<div class="w-64 p-sm">
		<p class="font-semibold">Rich content</p>
		<p class="typography-paragraph-regular text-foreground-subtle">
			It stays open while the pointer moves into it.
		</p>
	</div>
{/snippet}

{#snippet hovercard()}
	<Hovercard content={hovercardBody}>
		<Button>Hover me</Button>
	</Hovercard>
{/snippet}

{#snippet radioDemo()}
	<fieldset class="flex flex-col gap-sm">
		<legend class="mb-xs font-medium">Spindle</legend>
		<Radio name="spindle" value="spindle.tangled.sh" bind:group={radio}
			>spindle.tangled.sh</Radio
		>
		<Radio name="spindle" value="self-hosted" bind:group={radio}>Self-hosted</Radio>
		<Radio name="spindle" value="" bind:group={radio}>No spindle</Radio>
	</fieldset>
{/snippet}

{#snippet emptyState()}
	<EmptyState icon={Inbox} message="No issues yet." messageDirection="vertical" class="w-full" />
{/snippet}

{#snippet sectionItem(label: string)}
	<div class="rounded-md border border-border-default p-sm">{label}</div>
{/snippet}

{#snippet section()}
	<div class="w-full">
		<Section
			title="Repositories"
			empty={false}
			emptyMessage="No repositories yet."
			listClass="flex flex-col gap-xs"
		>
			{@render sectionItem("core")}
			{@render sectionItem("knot")}
		</Section>
	</div>
{/snippet}

{#snippet separator()}
	<div class="flex w-full flex-col items-center gap-md">
		<Separator class="w-full" />
		<div class="flex h-6 items-stretch gap-sm">
			<span>Before</span>
			<Separator orientation="vertical" />
			<span>After</span>
		</div>
		<div class="flex items-center gap-xs text-foreground-muted">
			<span class="typography-monospace-regular text-foreground-default">a1b2c3d</span>
			<Separator variant="dot" />
			<span>2 hours ago</span>
		</div>
	</div>
{/snippet}

{#snippet stepMarker()}
	<div class="flex flex-col">
		{#each ["Details", "Configuration", "Review"] as step, i (step)}
			<div class={["relative border-l border-border-default pl-xl", i < 2 && "pb-xl"]}>
				<StepMarker class="absolute top-0 -left-3">{i + 1}</StepMarker>
				<p class="font-medium">{step}</p>
			</div>
		{/each}
	</div>
{/snippet}

{#snippet formStep()}
	<form class="w-full">
		<FormStep step={1} title="Details" description="Basic repository information.">
			<Input placeholder="repository-name" />
		</FormStep>
		<FormStepDisclosure title="Advanced" last>
			<Radio value="" group="" name="formstep-spindle">No spindle</Radio>
		</FormStepDisclosure>
	</form>
{/snippet}

{#snippet rangeRow(index: number, item: unknown, actions: RowActions)}
	<div class="relative flex w-48 items-stretch justify-between px-sm">
		<button
			type="button"
			class="absolute inset-0 cursor-pointer"
			aria-label="Select line {item}"
			onclick={actions.onclick}
		></button>
		<div class="relative flex h-9 flex-1 items-center typography-monospace-small">
			line {index + 1}
		</div>
	</div>
{/snippet}

{#snippet rangeSelector()}
	<RangeSelector items={[1, 2, 3, 4, 5]} row={rangeRow} bind:range />
{/snippet}

{#snippet graphCell()}
	<div
		class="flex flex-col"
		style="--range-accent: var(--color-background-info-emphasis); --range-fill: var(--color-background-info-subtle)"
	>
		{#each graphRun as band, i (i)}
			<div class="relative flex">
				<GraphCell {band} />
				<GraphCell
					band={graphOverlay[i]}
					fill={graphOverlay[i] !== "middle"}
					style="--graph-line: var(--range-accent); --graph-fill: var(--range-fill)"
					class="absolute inset-y-0 left-0"
				/>
			</div>
		{/each}
	</div>
{/snippet}

{#snippet shimmerText()}
	<div class="flex flex-col gap-2xs typography-paragraph-large">
		<ShimmerText color="muted">Resolving knots</ShimmerText>
		<ShimmerText color="muted" delay={0.3}>Fetching objects</ShimmerText>
		<ShimmerText color="warning" delay={0.6}>Pipeline running</ShimmerText>
	</div>
{/snippet}

{#snippet textSwap()}
	<Card padding="small" class="flex w-56 items-center justify-between">
		<TextSwap value={swapped ? "Changes" : "Commits"} />
		<Button onclick={() => (swapped = !swapped)}>Swap</Button>
	</Card>
{/snippet}

{#snippet toggleFaces()}
	<Button class="min-w-22" onclick={() => (starred = !starred)}>
		<ToggleFaces on={starred} size="small" offLabel="Star" onLabel="Starred">
			{#snippet off(cls)}
				<Star class={cls} />
			{/snippet}
			{#snippet onIcon(cls)}
				<Star class={[cls, "[&_path]:fill-current"]} />
			{/snippet}
			{#snippet err(cls)}
				<TriangleAlert class={cls} />
			{/snippet}
		</ToggleFaces>
	</Button>
{/snippet}

{#snippet colorBall()}
	<div class="flex flex-col gap-xs">
		{#each [["TypeScript", "#3178c6"], ["Go", "#00ADD8"], ["Rust", "#dea584"], ["Nix", "#7e7eff"]] as [name, color] (name)}
			<span class="flex items-center gap-xs typography-paragraph-small">
				<ColorBall {color} />
				{name}
			</span>
		{/each}
	</div>
{/snippet}

{#snippet logo()}
	<div class="flex flex-col items-center gap-md">
		<Logo />
		<Logo wordmark />
	</div>
{/snippet}

{#snippet timeAgo()}
	<div class="flex flex-col gap-xs">
		<TimeAgo value={new Date(Date.now() - 5 * 60 * 1000)} />
		<TimeAgo value={new Date(Date.now() - 3 * 24 * 60 * 60 * 1000)} variant="full" />
	</div>
{/snippet}

{#snippet resizeHandle()}
	<div class="flex h-32 w-full rounded-md border border-border-default">
		<div
			class="flex shrink-0 items-center justify-center bg-background-subtle typography-paragraph-small"
			style:width="{panelWidth}px"
		>
			Panel
		</div>
		<ResizeHandle bind:width={panelWidth} min={64} max={200} resetTo={120} side="before" />
		<div class="flex min-w-0 flex-1 items-center justify-center typography-paragraph-small">
			Content
		</div>
	</div>
{/snippet}

{#snippet lightbox()}
	<div class="flex gap-xs">
		{#each shots as shot, i (shot.src)}
			<button
				type="button"
				class="cursor-zoom-in overflow-hidden rounded-md border border-border-default"
				onclick={() => {
					lightboxIndex = i;
					lightboxOpen = true;
				}}
			>
				<img src={shot.src} alt={shot.alt} class="h-16 w-auto" />
			</button>
		{/each}
	</div>
	<Lightbox
		open={lightboxOpen}
		images={shots}
		bind:index={lightboxIndex}
		onClose={() => (lightboxOpen = false)}
	/>
{/snippet}

{#snippet markdownEditor()}
	<div class="w-full">
		<MarkdownEditor {markup} bind:value={markdown} rows={4} compact />
	</div>
{/snippet}

{#snippet buttonCard()}
	<div class="grid w-full gap-xs">
		<ButtonCard icon={Settings} title="Settings" description="Manage this repository" />
		<ButtonCard
			variant="ghost"
			icon={GitFork}
			title="Fork"
			description="Copy to your account"
		/>
	</div>
{/snippet}

{#snippet listSearch()}
	<Input size="small" iconLeft={Search} placeholder="Filter" class="w-full" />
{/snippet}

{#snippet listTrailing()}
	<Button size="small" variant="primary">New</Button>
{/snippet}

{#snippet listToolbar()}
	<ListToolbar search={listSearch} trailing={listTrailing} />
{/snippet}

{#snippet listPanel()}
	<div class="w-full">
		<ListPanel toolbar={listToolbar}>
			<div class={listRows}>
				{#each ["Fix login redirect", "Add sitemap", "Bump deps"] as row (row)}
					<div class="px-sm py-xs typography-paragraph-small">{row}</div>
				{/each}
			</div>
		</ListPanel>
	</div>
{/snippet}

{#snippet actorInput()}
	<div class="w-full max-w-64">
		<ActorInput
			bobbinUrl={data.publicConfig.bobbinUrl}
			bind:value={actor}
			placeholder="Search people"
		/>
	</div>
{/snippet}

{#snippet signupPrompt()}
	<SignupPrompt />
{/snippet}

<Shell title="Tangled UI" entries={visible} total={entries.length} bind:query>
	<ul
		class="grid auto-rows-min grid-cols-1 gap-px bg-border-default md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
	>
		{#each visible as entry (entry.slug)}
			<Tile name={entry.name} slug={entry.slug}>
				{@render entry.demo()}
			</Tile>
		{/each}
	</ul>
</Shell>