Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768<script lang="ts"> import type { Snippet } from "svelte"; import ChevronDown from "$icon/chevron-down"; import ChevronRight from "$icon/chevron-right";
interface Props { open?: boolean; collapsible?: boolean; spacer?: boolean; onToggle?: () => void; class?: string; title: Snippet; actions?: Snippet; }
let { open = true, collapsible = true, spacer = false, onToggle, class: className = "", title, actions }: Props = $props();
const isInteractive = $derived(collapsible && onToggle != null); const titleClass = "flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2.5 py-2 text-left text-foreground-default select-none";</script>
<div class={[ "flex justify-between rounded-t-sm border border-border-default bg-background-default transition-colors duration-150", isInteractive && "hover:bg-background-subtle", (!open || !collapsible) && "rounded-b-sm", className ]}> {#if isInteractive} <button type="button" class={[titleClass, "cursor-pointer"]} onclick={onToggle} aria-expanded={open} > {#if open} <ChevronDown class="size-3.5 shrink-0 text-foreground-subtle" aria-hidden="true" /> {:else} <ChevronRight class="size-3.5 shrink-0 text-foreground-subtle" aria-hidden="true" /> {/if} {@render title()} </button> {:else} <div class={titleClass}> {#if spacer} <span class="size-3.5 shrink-0" aria-hidden="true"></span> {/if} {@render title()} </div> {/if}
{#if actions} <div class="flex shrink-0 items-center gap-2 pr-1.5"> {@render actions()} </div> {/if}</div>