Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940<script module lang="ts"> import { tv } from "tailwind-variants";
// the surface that docks directly beneath a <Tabs> bar. it pulls itself up 1px // so its top border tucks behind the bar, where the active tab's raised, opaque // background hides the seam — producing the connected "folder tab" look. keep it // flush against the tab bar (no margin between them) for the join to line up. export const tabPanel = tv({ base: "-mt-px rounded border border-border-default bg-background-default text-foreground-default", variants: { // the common surface padding; turn off to lay out children yourself padded: { true: "px-6 py-4", false: "" } }, defaultVariants: { padded: true } });</script>
<script lang="ts"> import type { Snippet } from "svelte";
interface Props { // tag to render as; a semantic <section> by default as?: string; padded?: boolean; class?: string; children: Snippet; }
let { as = "section", padded = true, class: className, children }: Props = $props();</script>
<svelte:element this={as} class={tabPanel({ padded, class: className })}> {@render children()}</svelte:element>