Empty state

<script lang="ts">
	import { Button, EmptyState } from '@archeblack/ui';
	import { IconFolder, IconPlus } from '@archeblack/ui/icons';
</script>

<EmptyState icon={IconFolder} title="Todavía no hay proyectos">
	Un proyecto agrupa tus despliegues, dominios y variables de entorno. Crea el primero para publicar
	tu sitio.
	{#snippet actions()}
		<Button variant="primary" iconStart={IconPlus}>Crear proyecto</Button>
		<Button variant="ghost">Ver la guía</Button>
	{/snippet}
</EmptyState>

<script lang="ts">
	import { Button, EmptyState } from '@archeblack/ui';
	import { IconSearch } from '@archeblack/ui/icons';
</script>

<EmptyState icon={IconSearch} title="Sin resultados para «portal»">
	Prueba con otra palabra o quita algún filtro.
	{#snippet actions()}
		<Button variant="secondary">Quitar los filtros</Button>
	{/snippet}
</EmptyState>

<script lang="ts">
	import { Button, EmptyState } from '@archeblack/ui';
	import { IconRefresh } from '@archeblack/ui/icons';
</script>

<!-- El ícono de estado se nombra («Error») y se lee antes del título. -->
<EmptyState variant="danger" title="No pudimos cargar los despliegues">
	El servidor no respondió a tiempo. Tus despliegues no cambiaron.
	{#snippet actions()}
		<Button variant="secondary" iconStart={IconRefresh}>Reintentar</Button>
	{/snippet}
</EmptyState>

<script lang="ts">
	import { Button, Card, EmptyState } from '@archeblack/ui';
	import { IconRocket } from '@archeblack/ui/icons';
</script>

<!-- size="sm": sin marco en el ícono y con menos aire, para una tarjeta o una celda de tabla. -->
<Card style="width: 100%; max-width: 26rem">
	{#snippet header()}
		<h4>Despliegues recientes</h4>
	{/snippet}
	<EmptyState size="sm" icon={IconRocket} title="Sin despliegues esta semana">
		El próximo push a main despliega solo.
		{#snippet actions()}
			<Button variant="ghost" size="sm">Desplegar ahora</Button>
		{/snippet}
	</EmptyState>
</Card>

<script lang="ts">
	import { Button, Card, EmptyState } from '@archeblack/ui';
</script>

<Card style="width: 100%; max-width: 26rem">
	{#snippet header()}
		<h4>Uso del mes</h4>
	{/snippet}
	<EmptyState size="sm" variant="danger" title="No pudimos cargar el uso">
		{#snippet actions()}
			<Button variant="ghost" size="sm">Reintentar</Button>
		{/snippet}
	</EmptyState>
</Card>

<script lang="ts">
	import { Button, EmptyState, Input } from '@archeblack/ui';
	import { IconSearch } from '@archeblack/ui/icons';

	const projects = ['Portal de clientes', 'Panel interno', 'Tienda', 'Documentación'];

	let query = $state('portal web');
	let search = $state<HTMLInputElement | null>(null);

	/** Al borrar, el botón desaparece con el vacío: el foco vuelve al campo, no se pierde. */
	function clear() {
		query = '';
		search?.focus();
	}

	const found = $derived(
		projects.filter((project) => project.toLowerCase().includes(query.trim().toLowerCase()))
	);
	/** Lo que dice la región status: vacía sin búsqueda, la cantidad o el vacío con búsqueda. */
	const announcement = $derived.by(() => {
		if (!query.trim()) return '';
		if (found.length === 0) return `Sin resultados para «${query.trim()}»`;
		return found.length === 1 ? '1 proyecto' : `${found.length} proyectos`;
	});
</script>

<div style="display: grid; gap: var(--arche-spacing-4); width: min(100%, 24rem)">
	<Input
		type="search"
		icon={IconSearch}
		bind:value={query}
		bind:ref={search}
		placeholder="Buscar proyectos"
		aria-label="Buscar proyectos"
	/>
	<!--
		La región status ya está montada (vacía) antes de que aparezca el vacío: los lectores de
		pantalla anuncian lo que cambia dentro de ella. El EmptyState entra y sale con {#if} y no
		lleva rol propio: montado junto con su rol, NVDA y JAWS no lo leerían.
	-->
	<p role="status" class="visually-hidden">{announcement}</p>
	{#if found.length > 0}
		<ul style="display: grid; gap: var(--arche-spacing-2); margin: 0; padding: 0; list-style: none">
			{#each found as project (project)}
				<li style="color: var(--arche-color-text-strong)">{project}</li>
			{/each}
		</ul>
	{:else}
		<EmptyState icon={IconSearch} size="sm" title="Sin resultados para «{query.trim()}»">
			Prueba con otra palabra.
			{#snippet actions()}
				<Button variant="secondary" size="sm" onclick={clear}>Borrar la búsqueda</Button>
			{/snippet}
		</EmptyState>
	{/if}
</div>