48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import type { Units } from "@/lib/display";
|
|
import { sectionHeading } from "@/lib/styles";
|
|
import type { WeatherReport } from "@/lib/weather/types";
|
|
import { ChoiceChips } from "../ui/ChoiceChips";
|
|
import { DailyView } from "./DailyView";
|
|
import { HourlyView } from "./HourlyView";
|
|
|
|
export type ForecastView = "hourly" | "daily";
|
|
|
|
/** The forecast section with a switch between the hourly and daily views. */
|
|
export function ForecastPanel({ report, units, view, onViewChange, providerLabel, maxDaysOnPlan }: {
|
|
report: WeatherReport;
|
|
units: Units;
|
|
view: ForecastView;
|
|
onViewChange: (view: ForecastView) => void;
|
|
providerLabel: string;
|
|
maxDaysOnPlan: number;
|
|
}) {
|
|
return (
|
|
<section aria-labelledby="forecast-heading" className="flex flex-col gap-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex min-w-0 flex-1 items-center gap-3">
|
|
<h2 id="forecast-heading" className={sectionHeading}>
|
|
The days ahead
|
|
</h2>
|
|
<span className="hidden h-px flex-1 bg-linear-to-r from-gold-dim/70 to-transparent sm:block" aria-hidden="true" />
|
|
</div>
|
|
<ChoiceChips
|
|
legend="Forecast view"
|
|
selected={view}
|
|
onChange={onViewChange}
|
|
choices={[
|
|
{ value: "hourly", label: "Hourly" },
|
|
{ value: "daily", label: "Daily", note: `${report.daily.length}d` },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{view === "hourly" ? (
|
|
<HourlyView hourly={report.hourly} stepHours={report.hourlyStepHours} units={units} timeZone={report.timeZone} />
|
|
) : (
|
|
<DailyView daily={report.daily} units={units} timeZone={report.timeZone} providerLabel={providerLabel} maxDaysOnPlan={maxDaysOnPlan} />
|
|
)}
|
|
</section>
|
|
);
|
|
}
|