36 lines
849 B
Svelte
36 lines
849 B
Svelte
<!-- [DEF:Card:Component] -->
|
|
<!--
|
|
@TIER: TRIVIAL
|
|
@SEMANTICS: card, container, ui-atom
|
|
@PURPOSE: Standardized container with padding and elevation.
|
|
@LAYER: Atom
|
|
-->
|
|
|
|
<script lang="ts">
|
|
// [SECTION: PROPS]
|
|
export let title: string = "";
|
|
export let padding: 'none' | 'sm' | 'md' | 'lg' = 'md';
|
|
// [/SECTION: PROPS]
|
|
|
|
const paddings = {
|
|
none: "p-0",
|
|
sm: "p-3",
|
|
md: "p-6",
|
|
lg: "p-8"
|
|
};
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<div class="rounded-lg border border-gray-200 bg-white text-gray-950 shadow-sm">
|
|
{#if title}
|
|
<div class="flex flex-col space-y-1.5 p-6 border-b border-gray-100">
|
|
<h3 class="text-lg font-semibold leading-none tracking-tight">{title}</h3>
|
|
</div>
|
|
{/if}
|
|
<div class="{paddings[padding]}">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
<!-- [/SECTION: TEMPLATE] -->
|
|
|
|
<!-- [/DEF:Card:Component] --> |