src/lib/components/Empty.svelte

<script lang="ts">
	import * as Empty from '$lib/components/ui/empty/index.js';
	import type { Snippet } from 'svelte';

	type Props = {
		icon?: Snippet;
		title: string;
		description?: string;
		content?: Snippet;
	};

	let { icon, title, description, content }: Props = $props();
</script>

<Empty.Root>
	<Empty.Header>
		{#if icon}
			<Empty.Media variant="icon">
				{@render icon()}
			</Empty.Media>
		{/if}
		<Empty.Title>{title}</Empty.Title>
		{#if description}
			<Empty.Description>
				{description}
			</Empty.Description>
		{/if}
	</Empty.Header>
	{#if content}
		<Empty.Content>
			{@render content()}
		</Empty.Content>
	{/if}
</Empty.Root>