46 lines
2.2 KiB
TypeScript
46 lines
2.2 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="section-kicker flex items-center gap-2"><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-card p-3 text-left transition hover:-translate-y-0.5 hover:bg-surface-raised/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent", active && "border-accent/60 bg-surface-raised/90")}
|
|
>
|
|
<span className="min-w-0">
|
|
<span className="block truncate text-xs font-medium text-muted">{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-accent" />
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|