WeatherSprite

import { WEATHER_LABEL, type Weather } from "@moodinary/sprites";
import { WeatherSprite } from "@moodinary/sprites/react";

const states: Weather[] = [
	"soleado",
	"parcial",
	"nublado",
	"tormenta",
	"niebla",
];

export default function WeatherStates() {
	return (
		<div className="grid w-full grid-cols-2 gap-3 sm:grid-cols-5">
			{states.map((w) => (
				<figure className="m-0" key={w}>
					<div className="h-20 overflow-hidden rounded-[8px] border border-line">
						<WeatherSprite weather={w} />
					</div>
					<figcaption className="mt-1.5 text-[12px] text-ink-3">
						{WEATHER_LABEL[w]}
					</figcaption>
				</figure>
			))}
		</div>
	);
}

import { WEATHER_LABEL, weatherFor } from "@moodinary/sprites";
import { WeatherSprite } from "@moodinary/sprites/react";
import { useState } from "react";

export default function WeatherFor() {
	const [avg, setAvg] = useState(3.7);
	const [n, setN] = useState(14);
	const w = weatherFor(avg, n);
	return (
		<div className="flex w-full flex-wrap items-center gap-6">
			<div className="h-24 w-40 overflow-hidden rounded-[8px] border border-line">
				<WeatherSprite weather={w} />
			</div>
			<div className="grid gap-3 text-[13px] text-ink-2">
				<label className="flex items-center gap-3">
					Promedio{" "}
					<input
						aria-label="Promedio"
						max={5}
						min={1}
						onChange={(e) => setAvg(Number(e.target.value))}
						step={0.1}
						type="range"
						value={avg}
					/>{" "}
					<code className="font-mono text-ink">
						{avg.toFixed(1).replace(".", ",")}
					</code>
				</label>
				<label className="flex items-center gap-3">
					Pulsos en 7 días{" "}
					<input
						aria-label="Pulsos en 7 días"
						max={30}
						min={0}
						onChange={(e) => setN(Number(e.target.value))}
						type="range"
						value={n}
					/>{" "}
					<code className="font-mono text-ink">{n}</code>
				</label>
				<div className="font-medium text-ink">{WEATHER_LABEL[w]}</div>
			</div>
		</div>
	);
}