70 lines
3.0 KiB
TypeScript
70 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { CalendarClock, MapPinned, Waves, CloudLightning } from "lucide-react";
|
|
import type { WeatherWarning } from "@/types/imgw";
|
|
import { formatDateTime } from "@/lib/weather-utils";
|
|
import { Card } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
export function WarningCard({ warning, index = 0 }: { warning: WeatherWarning; index?: number }) {
|
|
const { language, t } = useI18n();
|
|
const Icon = warning.kind === "hydro" ? Waves : CloudLightning;
|
|
const level = warning.level;
|
|
const levelLabel =
|
|
level === -1 ? t("warnings.drought") : level === null ? t("warnings.levelUnknown") : t("warnings.level", { level });
|
|
const areasLabel =
|
|
warning.areas.length > 8
|
|
? `${warning.areas.slice(0, 8).join(", ")} ${t("warnings.moreAreas", { count: warning.areas.length - 8 })}`
|
|
: warning.areas.join("; ");
|
|
return (
|
|
<motion.article
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: Math.min(index * 0.04, 0.4), duration: 0.35 }}
|
|
>
|
|
<Card className="h-full overflow-hidden p-5">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="rounded-card bg-warning/10 p-2.5 text-warning">
|
|
<Icon className="size-5" />
|
|
</div>
|
|
<span
|
|
className={cn(
|
|
"rounded-control border px-2.5 py-1 text-xs font-semibold",
|
|
level === -1
|
|
? "border-warning/30 bg-warning/10 text-warning"
|
|
: "border-warning/25 bg-warning/10 text-warning",
|
|
)}
|
|
>
|
|
{levelLabel}
|
|
</span>
|
|
</div>
|
|
<p className="mt-5 text-xs font-semibold uppercase tracking-[0.15em] text-muted">
|
|
{warning.kind === "hydro" ? t("warnings.hydro") : t("warnings.meteo")}
|
|
</p>
|
|
<h2 className="mt-2 text-lg font-semibold tracking-tight">
|
|
{warning.title || (warning.kind === "hydro" ? t("warnings.genericHydro") : t("warnings.genericMeteo"))}
|
|
</h2>
|
|
{warning.description && <p className="mt-3 line-clamp-5 text-sm leading-6 text-muted">{warning.description}</p>}
|
|
<div className="mt-5 space-y-2 text-xs text-muted">
|
|
<p className="flex items-start gap-2">
|
|
<CalendarClock className="mt-0.5 size-3.5 shrink-0" />
|
|
{formatDateTime(warning.validFrom, language)} —{" "}
|
|
{warning.validTo ? formatDateTime(warning.validTo, language) : t("warnings.untilCancelled")}
|
|
</p>
|
|
<p className="flex items-start gap-2">
|
|
<MapPinned className="mt-0.5 size-3.5 shrink-0" />
|
|
{areasLabel || t("warnings.areaUnknown")}
|
|
</p>
|
|
</div>
|
|
{warning.probability !== null && (
|
|
<p className="mt-4 text-xs font-medium text-muted">
|
|
{t("warnings.probability", { value: warning.probability })}
|
|
</p>
|
|
)}
|
|
</Card>
|
|
</motion.article>
|
|
);
|
|
}
|