29 lines
1008 B
TypeScript
29 lines
1008 B
TypeScript
"use client";
|
|
|
|
import { Heart } from "lucide-react";
|
|
import { useWeatherStore } from "@/lib/store";
|
|
import type { SynopStation } from "@/types/imgw";
|
|
import { StationCard } from "@/components/weather/station-card";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
export function FavoritesSection({ stations }: { stations: SynopStation[] }) {
|
|
const { t } = useI18n();
|
|
const favoriteIds = useWeatherStore((state) => state.favorites);
|
|
const favorites = stations.filter((station) => favoriteIds.includes(station.id));
|
|
if (!favorites.length) return null;
|
|
|
|
return (
|
|
<section className="space-y-3">
|
|
<div className="flex items-center gap-2 text-sm font-semibold">
|
|
<Heart className="size-4 fill-rose-500 text-rose-500" />
|
|
{t("favorites.title")}
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
|
{favorites.map((station, index) => (
|
|
<StationCard key={station.id} station={station} index={index} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|