feat: redesign dashboard around place search

components/weather/featured-stations-section.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { MapPinned } from "lucide-react";
+import { useWeatherStore } from "@/lib/store";
+import { formatTemperature, getWeatherMoodFromData } from "@/lib/weather-utils";
+import { useI18n } from "@/lib/i18n";
+import type { SynopStation } from "@/types/imgw";
+import { WeatherIcon } from "@/components/weather/weather-icon";
+import { cn } from "@/lib/utils";
+
+const featuredNames = ["Warszawa", "Kraków", "Gdańsk", "Wrocław", "Poznań", "Zakopane"];
+
+export function FeaturedStationsSection({ stations }: { stations: SynopStation[] }) {
+  const { language, t } = useI18n();
+  const selectedStationId = useWeatherStore((state) => state.selectedStationId);
+  const selectStation = useWeatherStore((state) => state.selectStation);
+  const featured = featuredNames.flatMap((name) => stations.find((station) => station.name === name) ?? []);
+  return (
+    <section className="space-y-3">
+      <div>
+        <p className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-700 dark:text-sky-300"><MapPinned className="size-4" />{t("featured.label")}</p>
+        <h2 className="mt-2 text-xl font-semibold tracking-tight">{t("featured.title")}</h2>
+      </div>
+      <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-6">
+        {featured.map((station) => {
+          const active = selectedStationId === station.id;
+          return (
+            <button
+              type="button"
+              key={station.id}
+              onClick={() => selectStation(station.id)}
+              className={cn("glass-subtle flex items-center justify-between gap-2 rounded-2xl p-3 text-left transition hover:-translate-y-0.5 hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:hover:bg-white/10", active && "border-sky-400/60 bg-white/60 dark:bg-white/15")}
+            >
+              <span className="min-w-0">
+                <span className="block truncate text-xs font-medium text-slate-600 dark:text-slate-300">{station.name}</span>
+                <span className="mt-1 block text-xl font-semibold tracking-tight">{formatTemperature(station.temperature, language)}</span>
+              </span>
+              <WeatherIcon mood={getWeatherMoodFromData(station)} className="size-6 shrink-0 text-sky-600 dark:text-sky-300" />
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}