Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142<script lang="ts"> import type { Snippet } from "svelte";
interface Props { number: number; title: string; disabled?: boolean; children: Snippet; action?: Snippet; id?: string; }
let { number, title, disabled = false, children, action, id }: Props = $props();</script>
<div {id} class="relative flex gap-4" class:pointer-events-none={disabled} class:opacity-50={disabled} aria-disabled={disabled}> <span class="relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-medium text-foreground-default" > {number} </span> <div class="min-w-0 flex-1"> <div class="flex items-center justify-between gap-3"> <h3 class="typography-paragraph-small font-semibold text-foreground-default uppercase"> {title} </h3> {#if action} {@render action()} {/if} </div> <div class="mt-3"> {@render children()} </div> </div></div>