4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T197b,import { useState } from 'react' import { Card, RowCard } from '../surface' import { Stack, Row } from '../layout' import { Text, Eyebrow } from '../text' import { Metric } from '../readout' import { Blob, Badge } from '../media' import { Segmented } from '../Segmented' import { Icon } from '../Icon' const CITIES = [ { id: 'lisbon', name: 'Lisbon', humidity: '41%', wind: '12 km/h', uv: 'High', forecast: [ { day: 'Mon', hi: 24, lo: 16, icon: 'sun', tone: 'yellow' as const, condition: 'Sunny' }, { day: 'Tue', hi: 21, lo: 15, icon: 'cloud', tone: 'blue' as const, condition: 'Cloudy' }, { day: 'Wed', hi: 19, lo: 14, icon: 'rain', tone: 'blue' as const, condition: 'Showers' }, { day: 'Thu', hi: 23, lo: 15, icon: 'sun', tone: 'yellow' as const, condition: 'Sunny' }, { day: 'Fri', hi: 26, lo: 17, icon: 'sun', tone: 'orange' as const, condition: 'Hot & sunny' }, ], }, { id: 'oslo', name: 'Oslo', humidity: '68%', wind: '18 km/h', uv: 'Low', forecast: [ { day: 'Mon', hi: 9, lo: 3, icon: 'cloud', tone: 'blue' as const, condition: 'Overcast' }, { day: 'Tue', hi: 7, lo: 2, icon: 'rain', tone: 'blue' as const, condition: 'Rain' }, { day: 'Wed', hi: 11, lo: 4, icon: 'sun', tone: 'yellow' as const, condition: 'Clear' }, { day: 'Thu', hi: 8, lo: 1, icon: 'cloud', tone: 'blue' as const, condition: 'Windy' }, { day: 'Fri', hi: 10, lo: 3, icon: 'rain', tone: 'blue' as const, condition: 'Showers' }, ], }, { id: 'dubai', name: 'Dubai', humidity: '55%', wind: '9 km/h', uv: 'Extreme', forecast: [ { day: 'Mon', hi: 41, lo: 29, icon: 'sun', tone: 'orange' as const, condition: 'Scorching' }, { day: 'Tue', hi: 40, lo: 28, icon: 'sun', tone: 'orange' as const, condition: 'Sunny' }, { day: 'Wed', hi: 39, lo: 27, icon: 'sun', tone: 'yellow' as const, condition: 'Hazy sun' }, { day: 'Thu', hi: 42, lo: 30, icon: 'sun', tone: 'orange' as const, condition: 'Scorching' }, { day: 'Fri', hi: 38, lo: 27, icon: 'cloud', tone: 'blue' as const, condition: 'Dusty' }, ], }, ] const HOUR_LABELS = ['6am', '9am', 'Noon', '3pm', '6pm', '9pm'] // Fraction of the day's hi/lo spread at each label — a plausible-looking curve // without hand-authoring per-hour data for every city and day. const HOUR_CURVE = [0.1, 0.5, 0.9, 1, 0.65, 0.25] function hoursFor(day: { hi: number; lo: number; icon: string }) { return HOUR_LABELS.map((t, i) => ({ t, temp: Math.round(day.lo + (day.hi - day.lo) * HOUR_CURVE[i]!), // Night bookends read cloudier than the daytime icon, even on a sunny day. icon: i === 0 || i === HOUR_LABELS.length - 1 ? (day.icon === 'sun' ? 'cloud' : day.icon) : day.icon, })) } const toF = (c: number) => Math.round((c * 9) / 5 + 32) /** An example weather widget: a city and unit picker, current conditions, an * hourly strip, and a five-day forecast. Picking a city swaps every figure on * the card; picking a forecast day re-centres the conditions and hourly strip * on that day instead of today. */ export function WeatherBlock() { const [unit, setUnit] = useState('c') const [cityId, setCityId] = useState(CITIES[0]!.id) const [dayIndex, setDayIndex] = useState(0) const city = CITIES.find((c) => c.id === cityId)! const day = city.forecast[dayIndex]! const hours = hoursFor(day) const t = (c: number) => (unit === 'f' ? `${toF(c)}°` : `${c}°`) return (

{city.name} {t(day.hi)} {dayIndex === 0 ? 'Now' : day.day} — {day.condition}, low {t(day.lo)} ({ value: c.id, label: c.name }))} /> Hourly — {dayIndex === 0 ? 'today' : day.day} {hours.map((h) => ( {h.t} {t(h.temp)} ))} 5-day forecast {dayIndex > 0 && Viewing {day.day}} {city.forecast.map((f, i) => ( setDayIndex(i)}> {f.day} {t(f.hi)} {t(f.lo)} ))}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/icon.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/readout.json","https://1st-pouf.worksonmy.dev/r/segmented.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/weather.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/weather.tsx"}],"className":"h-[70svh] min-h-80"}]]}]