Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<script lang="ts"> import Card, { type CardVariants } from "#lib/components/ui/Card.svelte"; import type { Component, Snippet } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements";
interface Props { message: string; messageDirection?: "horizontal" | "vertical"; icon?: Component<SvelteHTMLElements["svg"]>; border?: CardVariants["border"]; background?: CardVariants["background"]; size?: "default" | "inline"; class?: string; children?: Snippet; }
let { message, messageDirection = "horizontal", icon, border = true, background = true, size = "default", class: className, children }: Props = $props();
const Icon = $derived(icon);</script>
{#if size === "inline"} <p data-testid="emptyState" class={[ "flex items-center gap-xs typography-paragraph-regular text-foreground-muted", className ]} > {message}{@render children?.()} </p>{:else} <Card data-testid="emptyState" {border} {background} padding="none" class={[ "flex flex-col items-center justify-center gap-xl p-4xl typography-paragraph-large text-foreground-subtle", className ].join(" ")} > {#if Icon} <Icon class="size-16 text-foreground-disabled" aria-hidden="true" /> {/if} <span class="flex items-center gap-sm {messageDirection === 'vertical' && 'flex-col'}" >{message}{@render children?.()}</span > </Card>{/if}