olive/src/lib/components/layout/Card.svelte

<script lang="ts">
  import type { Snippet } from 'svelte';
  import { cn } from '$lib/utils/cn.js';

  interface Props {
    class?: string;
    children?: Snippet;
  }

  let { class: className = '', children }: Props = $props();
</script>

<div
  class={cn(
    'rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)]',
    'shadow-[var(--shadow-sm)]',
    className
  )}
>
  {#if children}{@render children()}{/if}
</div>