homeio

1"use client";
2
3import { Droplets, Sun, Thermometer, Wind } from "@/components/icons/platform-icons";
4import {
5  Cloud,
6  CloudDrizzle,
7  CloudFog,
8  CloudLightning,
9  CloudRain,
10  CloudSnow,
11  CloudSun,
12} from "@/components/icons/platform-icons";
13import { PopoverShell } from "@/modules/system/components/status-bar/popover-shell";
14import { formatTemperature } from "@/modules/system/components/status-bar/utils";
15import type { WeatherSnapshot } from "@/lib/shared/contracts/weather";
16
17type WeatherPopoverProps = {
18  weather: WeatherSnapshot | undefined;
19  onClose: () => void;
20};
21
22export function WeatherPopover({ weather, onClose }: WeatherPopoverProps) {
23  const mainTemperature = formatTemperature(weather?.current.temperatureC);
24  const feelsLike = formatTemperature(weather?.current.feelsLikeC);
25  const hasMainTemperature = typeof weather?.current.temperatureC === "number";
26  const hasFeelsLike = typeof weather?.current.feelsLikeC === "number";
27  const dailyForecast = weather?.dailyForecast ?? [];
28
29  return (
30    <PopoverShell onClose={onClose} className="w-72">
31      <div className="p-4">
32        <div className="flex items-start justify-between mb-3">
33          <div>
34            <p className="text-xs text-muted-foreground mb-0.5">
35              {weather?.location.label ?? "Unknown location"}
36            </p>
37            <div className="flex items-end gap-1">
38              <span className="text-3xl font-light text-foreground">
39                {mainTemperature}
40              </span>
41              <span className="text-lg text-muted-foreground mb-0.5">
42                {hasMainTemperature ? "C" : ""}
43              </span>
44            </div>
45            <p className="text-xs text-muted-foreground">
46              {weather?.current.condition ?? "Unknown"}
47            </p>
48          </div>
49          <Thermometer className="size-10 text-status-amber" />
50        </div>
51
52        <div className="flex items-center gap-4 text-xs text-muted-foreground">
53          <span className="flex items-center gap-1">
54            <Droplets className="size-3" /> Hum {weather?.current.humidityPercent ?? "--"}%
55          </span>
56          <span className="flex items-center gap-1">
57            <Wind className="size-3" /> Wind {weather?.current.windSpeedKph ?? "--"} km/h
58          </span>
59          <span className="flex items-center gap-1">
60            <Sun className="size-3" /> Feels {feelsLike}
61            {hasFeelsLike ? "C" : ""}
62          </span>
63        </div>
64
65        <div className="mt-4 border-t border-glass-border pt-3">
66          <p className="text-xs text-muted-foreground uppercase tracking-wider mb-2">
67            Next 5 Days
68          </p>
69          <div className="flex items-stretch gap-1.5">
70            {dailyForecast.length > 0 ? (
71              dailyForecast.map((day) => (
72                <div
73                  key={day.date}
74                  className="flex flex-1 min-w-0 flex-col items-center gap-1 rounded-lg bg-secondary/25 px-1.5 py-2 text-xs text-muted-foreground"
75                >
76                  <span className="text-2xs font-medium text-foreground">
77                    {new Date(`${day.date}T00:00:00`).toLocaleDateString(undefined, {
78                      weekday: "short",
79                    })}
80                  </span>
81                  <ForecastIcon weatherCode={day.weatherCode} />
82                  <span className="max-w-full truncate text-2xs">{day.condition}</span>
83                  <span className="font-mono text-2xs text-foreground">
84                    {formatTemperature(day.tempMaxC)}/{formatTemperature(day.tempMinC)}
85                  </span>
86                </div>
87              ))
88            ) : (
89              <span className="text-xs text-muted-foreground">No forecast available</span>
90            )}
91          </div>
92        </div>
93      </div>
94    </PopoverShell>
95  );
96}
97
98function ForecastIcon({ weatherCode }: { weatherCode: number | null }) {
99  if (weatherCode === null) {
100    return <Cloud className="size-3.5 text-muted-foreground" />;
101  }
102  if (weatherCode === 0) {
103    return <Sun className="size-3.5 text-status-amber" />;
104  }
105  if (weatherCode === 1 || weatherCode === 2) {
106    return <CloudSun className="size-3.5 text-status-amber" />;
107  }
108  if (weatherCode === 3) {
109    return <Cloud className="size-3.5 text-muted-foreground" />;
110  }
111  if (weatherCode === 45 || weatherCode === 48) {
112    return <CloudFog className="size-3.5 text-muted-foreground" />;
113  }
114  if (weatherCode >= 51 && weatherCode <= 57) {
115    return <CloudDrizzle className="size-3.5 text-primary" />;
116  }
117  if ((weatherCode >= 61 && weatherCode <= 67) || (weatherCode >= 80 && weatherCode <= 82)) {
118    return <CloudRain className="size-3.5 text-primary" />;
119  }
120  if ((weatherCode >= 71 && weatherCode <= 77) || weatherCode === 85 || weatherCode === 86) {
121    return <CloudSnow className="size-3.5 text-primary" />;
122  }
123  if (weatherCode === 95 || weatherCode === 96 || weatherCode === 99) {
124    return <CloudLightning className="size-3.5 text-status-amber" />;
125  }
126  return <Cloud className="size-3.5 text-muted-foreground" />;
127}
128