116 lines
4.9 KiB
TypeScript
116 lines
4.9 KiB
TypeScript
"use client";
|
||
import { useEffect, useState } from "react";
|
||
import { RefreshCw, Wind, Droplets, Thermometer } from "lucide-react";
|
||
|
||
interface CurrentWeather {
|
||
temp: number; feelsLike: number; humidity: number; windKmh: number; desc: string; icon: string;
|
||
}
|
||
interface DayForecast {
|
||
date: string; maxTemp: number; minTemp: number; desc: string; icon: string; precipProb: number;
|
||
}
|
||
interface WeatherData {
|
||
current: CurrentWeather;
|
||
forecast: DayForecast[];
|
||
}
|
||
|
||
const DAY_NAMES = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];
|
||
const MONTH_NAMES = ["янв","фев","мар","апр","май","июн","июл","авг","сен","окт","ноя","дек"];
|
||
|
||
export function WeatherWidget() {
|
||
const [data, setData] = useState<WeatherData | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(false);
|
||
const [selected, setSelected] = useState(0);
|
||
|
||
const fetchData = async () => {
|
||
setLoading(true); setError(false);
|
||
try {
|
||
const res = await fetch("/api/weather");
|
||
if (!res.ok) throw new Error();
|
||
setData(await res.json());
|
||
} catch { setError(true); }
|
||
finally { setLoading(false); }
|
||
};
|
||
|
||
useEffect(() => { fetchData(); }, []);
|
||
|
||
const c = data?.current;
|
||
const day = data?.forecast?.[selected];
|
||
const formatDate = (dateStr: string) => {
|
||
const d = new Date(dateStr + "T12:00:00");
|
||
return `${DAY_NAMES[d.getDay()]}, ${d.getDate()} ${MONTH_NAMES[d.getMonth()]}`;
|
||
};
|
||
|
||
return (
|
||
<div className="glass-card p-5 flex flex-col gap-4">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm font-medium text-slate-300">Погода · Санкт-Петербург</span>
|
||
<button onClick={fetchData} className="text-slate-500 hover:text-slate-300 transition-colors">
|
||
<RefreshCw className={`w-3.5 h-3.5 ${loading ? "animate-spin" : ""}`} />
|
||
</button>
|
||
</div>
|
||
|
||
{error ? (
|
||
<div className="text-slate-500 text-sm text-center py-4">Нет данных</div>
|
||
) : loading ? (
|
||
<div className="space-y-3 animate-pulse">
|
||
<div className="h-12 bg-slate-700/50 rounded w-32" />
|
||
<div className="h-4 bg-slate-700/50 rounded w-48" />
|
||
<div className="flex gap-2">{[...Array(7)].map((_,i)=><div key={i} className="h-20 bg-slate-700/50 rounded flex-1"/>)}</div>
|
||
</div>
|
||
) : c && day ? (
|
||
<>
|
||
<div className="flex items-center gap-4">
|
||
<span className="text-5xl">{selected === 0 ? c.icon : day.icon}</span>
|
||
<div>
|
||
<div className="flex items-baseline gap-1">
|
||
<span className="text-4xl font-bold text-white">
|
||
{selected === 0 ? c.temp : day.maxTemp}°
|
||
</span>
|
||
{selected !== 0 && (
|
||
<span className="text-slate-400 text-lg">{day.minTemp}°</span>
|
||
)}
|
||
</div>
|
||
<div className="text-slate-300 text-sm">{selected === 0 ? c.desc : day.desc}</div>
|
||
<div className="text-xs text-slate-500">{selected === 0 ? "Сейчас" : formatDate(day.date)}</div>
|
||
</div>
|
||
{selected === 0 && (
|
||
<div className="ml-auto flex flex-col gap-1 text-xs text-slate-400">
|
||
<span className="flex items-center gap-1"><Thermometer className="w-3 h-3 text-orange-400"/>Ощущ. {c.feelsLike}°</span>
|
||
<span className="flex items-center gap-1"><Droplets className="w-3 h-3 text-blue-400"/>{c.humidity}%</span>
|
||
<span className="flex items-center gap-1"><Wind className="w-3 h-3 text-teal-400"/>{c.windKmh} км/ч</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex gap-1.5 overflow-x-auto pb-1">
|
||
{data.forecast.map((f, i) => {
|
||
const d = new Date(f.date + "T12:00:00");
|
||
const isToday = i === 0;
|
||
return (
|
||
<button
|
||
key={f.date}
|
||
onClick={() => setSelected(i)}
|
||
className={`flex-1 min-w-[52px] flex flex-col items-center gap-1 p-2 rounded-xl transition-all text-center ${
|
||
selected === i
|
||
? "bg-indigo-600/60 ring-1 ring-indigo-500"
|
||
: "bg-slate-800/40 hover:bg-slate-700/50"
|
||
}`}
|
||
>
|
||
<span className="text-xs text-slate-400">{isToday ? "Сег" : DAY_NAMES[d.getDay()]}</span>
|
||
<span className="text-lg">{f.icon}</span>
|
||
<span className="text-xs font-medium text-white">{f.maxTemp}°</span>
|
||
<span className="text-xs text-slate-500">{f.minTemp}°</span>
|
||
{f.precipProb > 20 && (
|
||
<span className="text-[10px] text-blue-400">{f.precipProb}%</span>
|
||
)}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|