chore: install project dependencies and generate build artifacts.

2026-03-06 08:41:19 +08:00
parent b210dcf0dd
commit dc4167b514
28 changed files with 4143 additions and 0 deletions
@@ -0,0 +1,60 @@
+"use client";
+
+import { ThermometerSun } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import type { CitySummary } from "@/lib/types";
+
+type CityListProps = {
+  cities: CitySummary[];
+  selectedCity: string | null;
+  onSelectCity: (cityName: string) => void;
+};
+
+function riskVariant(level: CitySummary["risk_level"]): "success" | "warning" | "danger" {
+  if (level === "high") return "danger";
+  if (level === "medium") return "warning";
+  return "success";
+}
+
+export function CityList({ cities, selectedCity, onSelectCity }: CityListProps) {
+  return (
+    <Card className="h-full">
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center justify-between text-sm uppercase tracking-wider text-slate-300">
+          <span>Monitored Cities</span>
+          <Badge variant="default">{cities.length}</Badge>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="h-[calc(100%-64px)] overflow-y-auto">
+        <div className="space-y-2">
+          {cities.map((city) => (
+            <button
+              key={city.name}
+              onClick={() => onSelectCity(city.name)}
+              className={cn(
+                "w-full rounded-lg border px-3 py-2 text-left transition-colors",
+                selectedCity === city.name
+                  ? "border-cyan-500 bg-cyan-950/40"
+                  : "border-slate-800 bg-slate-900/70 hover:bg-slate-800/80",
+              )}
+            >
+              <div className="flex items-center justify-between gap-2">
+                <div className="truncate font-medium text-slate-100">
+                  {city.display_name}
+                </div>
+                <Badge variant={riskVariant(city.risk_level)}>{city.risk_level}</Badge>
+              </div>
+              <div className="mt-1 flex items-center gap-1 text-xs text-slate-400">
+                <ThermometerSun className="h-3.5 w-3.5" />
+                <span>{city.temp_unit === "fahrenheit" ? "Fahrenheit" : "Celsius"}</span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}