46 lines
2.4 KiB
TypeScript
46 lines
2.4 KiB
TypeScript
"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>
|
|
);
|
|
}
|