alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv } from "tailwind-variants";
3
4 export const tabPanel = tv({
5 base: "rounded-sm border border-border-default bg-background-default text-foreground-default",
6 variants: {
7 // the common surface padding; turn off to lay out children yourself
8 padded: {
9 true: "px-6 py-4",
10 false: ""
11 }
12 },
13 defaultVariants: {
14 padded: true
15 }
16 });
17</script>
18
19<script lang="ts">
20 import type { Snippet } from "svelte";
21
22 interface Props {
23 // tag to render as; a semantic <section> by default
24 as?: string;
25 padded?: boolean;
26 class?: string;
27 children: Snippet;
28 }
29
30 let { as = "section", padded = true, class: className, children }: Props = $props();
31</script>
32
33<svelte:element this={as} class={tabPanel({ padded, class: className })}>
34 {@render children()}
35</svelte:element>