init

components/forecast/ForecastPanel.tsx

@@ -0,0 +1,48 @@
+"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>
+  );
+}