Estados vacíos

Qué va a aparecer acá y cuál es el siguiente paso.

Todavía no hay respuestas

Cuando el grupo empiece a responder, acá vas a ver cómo evoluciona el clima.

Código

empty-states.tsx

import { Button } from "@moodinary/ui/components/button";
import {
	Empty,
	EmptyContent,
	EmptyDescription,
	EmptyHeader,
	EmptyScene,
	EmptyTitle,
} from "@moodinary/ui/components/empty";
import { QrCodeIcon } from "@moodinary/ui/components/icons";

export default function EmptyStatesPattern() {
	return (
		<Empty className="bg-noise">
			<EmptyHeader>
				<EmptyScene />
				<EmptyTitle>Todavía no hay respuestas</EmptyTitle>
				<EmptyDescription>
					Cuando el grupo empiece a responder, acá vas a ver cómo evoluciona el
					clima.
				</EmptyDescription>
			</EmptyHeader>
			<EmptyContent>
				<Button variant="secondary">
					<QrCodeIcon />
					Compartir QR
				</Button>
			</EmptyContent>
		</Empty>
	);
}

Reglas

Título en una oración que explica el vacío, sin culpas: Todavía no hay respuestas.
Descripción con lo que va a pasar cuando haya datos.
Una sola acción, secondary, que destrabe el vacío.
Con grano y, si suma, un momento pixel. Uno por pantalla.
size="sm" para vacíos dentro de un widget.