Santhosh Janardhanan
8e7bfbe517
- Add LoadingState with table, card, list, and text skeleton patterns - Add EmptyState with customizable icon, title, description, and action slot - Add FilterBar with search input, clear button, and custom filter slot - Add DataTable with TanStack Table integration, sorting, and row click - Create barrel export index.ts for common components - Install tanstack-table-8-svelte-5 for Svelte 5 compatibility - Sync auth spec with authenticated user redirect requirements - Archive p03-dashboard-enhancement Refs: openspec/changes/p04-content-patterns Closes: p04-content-patterns
33 lines
829 B
Svelte
33 lines
829 B
Svelte
<script lang="ts">
|
|
import { Inbox } from 'lucide-svelte';
|
|
import type { Snippet } from 'svelte';
|
|
import type { ComponentType, SvelteComponent } from 'svelte';
|
|
|
|
interface Props {
|
|
title?: string;
|
|
description?: string;
|
|
icon?: ComponentType<SvelteComponent>;
|
|
children?: Snippet;
|
|
}
|
|
|
|
let {
|
|
title = 'No data',
|
|
description = 'No records found.',
|
|
icon: Icon = Inbox,
|
|
children
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div class="empty-state flex flex-col items-center justify-center py-12 text-center">
|
|
<div class="text-base-content/30 mb-4">
|
|
<svelte:component this={Icon} size={48} />
|
|
</div>
|
|
<h3 class="text-lg font-medium text-base-content/70">{title}</h3>
|
|
<p class="text-sm text-base-content/50 mt-1 max-w-sm">{description}</p>
|
|
{#if children}
|
|
<div class="mt-4">
|
|
{@render children()}
|
|
</div>
|
|
{/if}
|
|
</div>
|