Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<script lang="ts"> import type { Snippet } from "svelte"; import GraphCell, { type Band } from "$lib/components/ui/GraphCell.svelte"; import type { DotActions } from "$lib/components/ui/RangeSelector.svelte";
interface Props { index: number; position?: Band; displayed?: Band; selected?: boolean; /** whether pointing at this row's dot can change the range at all */ interactive?: boolean; dot: DotActions; children: Snippet; }
let { index, position = "middle", displayed = "none", selected = false, interactive = true, dot, children }: Props = $props();</script>
<div data-index={index} style="grid-column: 1; grid-row: {index + 1}" class="group relative box-border flex min-h-10 rounded-sm border-border-default {selected ? 'hover:bg-background-inset' : 'hover:bg-background-subtle'}"> <button type="button" class="relative z-20 flex {interactive ? 'cursor-pointer hover:[--graph-dot:var(--range-accent)]' : 'cursor-default'}" aria-label="Set range boundary {index + 1}" {...dot} > <GraphCell band={position} /> <GraphCell band={displayed} fill={displayed !== "middle"} style="--graph-line: var(--range-line); --graph-fill: var(--range-mid); --graph-dot: {displayed === 'middle' ? 'var(--range-mid)' : 'var(--range-accent)'}" class="absolute inset-y-0 left-0" /> </button> {@render children()}</div>