Low-data / Niebla overlay

import { Button } from "@moodinary/ui/components/button";
import { ClimaChip } from "@moodinary/ui/components/clima-chip";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@moodinary/ui/components/dialog";
import { CloudFog, QrCodeIcon } from "@moodinary/ui/components/icons";
import { NieblaOverlay } from "@moodinary/ui/components/niebla-overlay";
import { QrShare } from "@moodinary/ui/components/qr-share";

function Decoy() {
	return (
		<div className="grid gap-2">
			{[70, 45, 85, 55, 65].map((w) => (
				<div
					className="h-3 rounded bg-line-2"
					key={w}
					style={{ width: `${w}%` }}
				/>
			))}
		</div>
	);
}

export default function NieblaExample() {
	return (
		<NieblaOverlay
			action={
				<Dialog>
					<DialogTrigger render={<Button size="sm" />}>
						<QrCodeIcon />
						Compartir pulso
					</DialogTrigger>
					<DialogContent>
						<DialogHeader>
							<DialogTitle>Compartir el pulso de 2.º B</DialogTitle>
							<DialogDescription>
								Mandá el link o mostrá el QR al grupo.
							</DialogDescription>
						</DialogHeader>
						<QrShare
							extra={
								<span className="text-[12px] text-ink-3">
									QR de ejemplo, no escaneable.
								</span>
							}
							onPrint={() => window.print()}
							qr={
								<QrCodeIcon
									aria-label="QR de ejemplo, no escaneable"
									className="text-ink"
									role="img"
								/>
							}
							title="Pulso de 2.º B"
							url="https://pulses.moodinary.com/ejemplo-2b"
						/>
					</DialogContent>
				</Dialog>
			}
			badge={<ClimaChip icon={<CloudFog />} label="Niebla" />}
			className="min-h-[260px]"
			description="2.º B tiene 3 de los 8 pulsos que hacen falta en 7 días. Compartí el link o el QR con el grupo."
			title="Faltan respuestas para ver el clima"
		>
			<Decoy />
		</NieblaOverlay>
	);
}

import { Note } from "@moodinary/ui/components/note";
import { PixelScene } from "@moodinary/ui/components/pixel-scene";
import { Stat, StatStrip } from "@moodinary/ui/components/stat";

/*
 * Niebla real de Inicio (inicio-hero.tsx): un aviso con la escena de niebla que acompaña,
 * nunca tapa los números. El promedio queda a la vista como provisorio.
 */
export default function NieblaProvisional() {
	return (
		<div className="grid w-full gap-3">
			<Note>
				<PixelScene
					className="shrink-0"
					label="Niebla"
					scene="niebla"
					size="sm"
					still
				/>
				<span>
					Con 5 pulsos no alcanza para sacar conclusiones. Cuando haya 8 o más,
					te mostramos la tendencia.
				</span>
			</Note>
			<StatStrip className="w-full" muted>
				<Stat detail="provisorio" label="Nivel promedio" value="3,2" />
				<Stat
					detail="necesitamos 8 para leer la semana"
					label="Pulsos"
					value="5"
				/>
				<Stat
					detail={
						<>
							Sin meta semanal ·{" "}
							<a className="underline underline-offset-2" href="#definir">
								definir
							</a>
						</>
					}
					label="Pulsos vs meta"
					value="—"
				/>
			</StatStrip>
		</div>
	);
}