Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const card = tv({ base: "overflow-clip", variants: { rounded: { true: "rounded-sm", false: "" }, border: { true: "border border-border-default", false: "" }, shadow: { true: "shadow-xs", false: "" }, background: { true: "bg-background-default", false: "" }, padding: { regular: "p-4", small: "p-2", none: "" } }, defaultVariants: { rounded: true, 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"> { rounded?: CardVariants["rounded"]; border?: CardVariants["border"]; shadow?: CardVariants["shadow"]; background?: CardVariants["background"]; padding?: CardVariants["padding"]; class?: string; children?: Snippet; }
let { rounded = true, border = true, shadow = false, background = true, padding = "regular", class: className, children, ...rest }: Props = $props();
const classes = $derived( card({ rounded, border, shadow, background, padding, class: className }) );</script>
<div class={classes} {...rest}> {#if children} {@render children()} {/if}</div>