Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<script lang="ts"> import GitBranch from "$icon/git-branch"; import Github from "$icon/github";
interface Props { value: "github" | "url"; onSelect: (v: "github" | "url") => void; }
let { value, onSelect }: Props = $props();
const methods = [ { value: "github", icon: Github, title: "GitHub", description: "Import a GitHub repository to your Tangled account." }, { value: "url", icon: GitBranch, title: "Git URL", description: "Import any Git repository from an URL to your Tangled account." } ] as const;</script>
<div class="grid gap-2 rounded-sm border border-border-default bg-background-subtle p-2 sm:grid-cols-2"> {#each methods as method (method.value)} {@const Icon = method.icon} {@const selected = value === method.value} <button type="button" aria-pressed={selected} onclick={() => onSelect(method.value)} class="cursor-pointer rounded-sm border border-border-default p-4 text-left transition-colors {selected ? 'bg-background-default shadow-xs' : 'bg-background-subtle hover:bg-background-inset'}" > <span class="flex items-center gap-2 typography-paragraph-regular font-medium"> <Icon class="size-4" aria-hidden="true" /> {method.title} </span> <span class="mt-2 block typography-paragraph-small text-foreground-muted"> {method.description} </span> </button> {/each}</div>