Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
at icy/tmrrpn
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const card = tv({ base: "rounded-sm", variants: { border: { true: "border border-border-default", false: "" }, shadow: { true: "shadow-xs", false: "" }, background: { true: "bg-background-default", false: "" }, padding: { regular: "px-6 py-4", small: "p-4", none: "" } }, defaultVariants: { border: true, shadow: false, background: true, padding: "regular" } });
export type CardVariants = VariantProps<typeof card>;</script>
<script lang="ts"> import type { Snippet } from "svelte"; import type { HTMLAttributes } from "svelte/elements";
interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> { border?: CardVariants["border"]; shadow?: CardVariants["shadow"]; background?: CardVariants["background"]; padding?: CardVariants["padding"]; class?: string; children?: Snippet; }
let { border = true, shadow = false, background = true, padding = "regular", class: className, children, ...rest }: Props = $props();
const classes = $derived(card({ border, shadow, background, padding, class: className }));</script>
<div class={classes} {...rest}> {#if children} {@render children()} {/if}</div>