Compact Weather

\n \n City\n setQuery(event.target.value)}\n placeholder=\"Search a city\"\n className=\"w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-base text-white outline-none transition placeholder:text-slate-500 focus:border-sky-300/60 focus:ring-4 focus:ring-sky-400/15\"\n />\n \n \n {loading ? \"Searching...\" : \"Search city\"}\n \n \n\n

\n {QUICK_CITIES.map((city) => (\n void loadWeather(city)}\n className=\"rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-slate-200 transition hover:border-sky-300/40 hover:bg-sky-400/10\"\n >\n {city}\n \n ))}\n

\n\n

\n {loading ? (\n \n ) : error ? (\n void loadWeather(query || DEFAULT_CITY)} />\n ) : weather && profile ? (\n

{weather.location}

{profile.label}

{profile.detail}

\n \n Live\n \n

\n\n

\n \n

\n {formatTemp(weather.current.temperatureC)}\n

\n Feels crisp, readable, and compact on mobile and desktop.\n

\n\n

At a glance

\n \n \n \n {humidity ? : null}\n

Location details

{weather.location}

Default city loads on open; you can search any city you like.

\n ) : null}\n

\n\n \n

Diff · v7