flotilla/src/lib/components/Card.svelte

<script lang="ts">
  import type {Snippet} from "svelte"
  import type {HTMLAttributes} from "svelte/elements"
  import cx from "classnames"

  type Props = HTMLAttributes<HTMLElement> & {
    children?: Snippet
    tag?: string
    sm?: boolean
    flat?: boolean
    interactive?: boolean
  }

  const {
    children,
    tag = "div",
    sm = false,
    flat = false,
    interactive = false,
    ...restProps
  }: Props = $props()

  const className = $derived(
    cx(
      "card",
      {
        "card-sm": sm,
        "card-flat": flat,
        "card-interactive": interactive,
      },
      restProps.class,
    ),
  )
</script>

<svelte:element this={tag} {...restProps} class={className}>
  {@render children?.()}
</svelte:element>