140 lines
4.2 KiB
TypeScript
140 lines
4.2 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { Droplets, Wind } from "lucide-react";
|
||
|
||
function getWeatherEmoji(code: string): string {
|
||
const c = parseInt(code);
|
||
if (c === 113) return "☀️";
|
||
if (c === 116) return "⛅";
|
||
if (c === 119 || c === 122) return "☁️";
|
||
if (c >= 176 && c <= 182) return "🌦️";
|
||
if (c >= 185 && c <= 200) return "🌧️";
|
||
if (c >= 200 && c <= 210) return "⛈️";
|
||
if (c >= 210 && c <= 260) return "❄️";
|
||
if (c >= 260 && c <= 300) return "🌨️";
|
||
if (c >= 300 && c <= 400) return "🌧️";
|
||
return "🌤️";
|
||
}
|
||
|
||
function formatDate(dateStr: string): string {
|
||
const d = new Date(dateStr);
|
||
return d.toLocaleDateString("ru-RU", { weekday: "short", day: "numeric" });
|
||
}
|
||
|
||
interface Props {
|
||
weather: any;
|
||
}
|
||
|
||
export default function WeatherCard({ weather }: Props) {
|
||
if (!weather) {
|
||
return (
|
||
<motion.div
|
||
className="glass-card p-6 h-full flex items-center justify-center"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
>
|
||
<div className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||
Загрузка погоды...
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<motion.div
|
||
className="glass-card p-6 h-full flex flex-col"
|
||
style={{
|
||
background: "rgba(59,130,246,0.05)",
|
||
border: "1px solid rgba(59,130,246,0.15)",
|
||
}}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.35, delay: 0.21 }}
|
||
whileHover={{ scale: 1.01 }}
|
||
>
|
||
{/* Location */}
|
||
<div
|
||
className="text-sm font-medium mb-3"
|
||
style={{ color: "var(--text-secondary)" }}
|
||
>
|
||
📍 Санкт-Петербург
|
||
</div>
|
||
|
||
{/* Current weather */}
|
||
<div className="flex items-center gap-4 mb-4">
|
||
<div className="text-5xl leading-none">
|
||
{getWeatherEmoji(weather.weatherCode)}
|
||
</div>
|
||
<div>
|
||
<div
|
||
className="font-black leading-none"
|
||
style={{ fontSize: "44px", color: "var(--text-primary)" }}
|
||
>
|
||
{weather.temp}°
|
||
</div>
|
||
<div
|
||
className="text-sm mt-1"
|
||
style={{ color: "var(--text-secondary)" }}
|
||
>
|
||
{weather.desc}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="flex gap-4 mb-4">
|
||
<div className="flex items-center gap-1.5">
|
||
<Droplets size={14} color="#3b82f6" />
|
||
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
||
{weather.humidity}%
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<Wind size={14} color="#8b5cf6" />
|
||
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
||
{weather.windSpeed} км/ч
|
||
</span>
|
||
</div>
|
||
<div
|
||
className="text-xs"
|
||
style={{ color: "var(--text-secondary)" }}
|
||
>
|
||
Ощущается {weather.feelsLike}°
|
||
</div>
|
||
</div>
|
||
|
||
{/* Forecast */}
|
||
<div className="flex gap-2 mt-auto">
|
||
{(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
|
||
<motion.div
|
||
key={day.date}
|
||
className="flex-1 rounded-2xl p-2.5 text-center"
|
||
style={{
|
||
background: i === 0 ? "rgba(59,130,246,0.14)" : "rgba(255,255,255,0.04)",
|
||
border: i === 0 ? "1px solid rgba(59,130,246,0.28)" : "1px solid rgba(255,255,255,0.06)",
|
||
}}
|
||
initial={{ opacity: 0, y: 8 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.3 + i * 0.08 }}
|
||
>
|
||
<div
|
||
className="text-xs mb-1 font-medium"
|
||
style={{ color: "var(--text-secondary)" }}
|
||
>
|
||
{i === 0 ? "Сег." : formatDate(day.date)}
|
||
</div>
|
||
<div className="text-lg mb-1">{getWeatherEmoji(day.weatherCode)}</div>
|
||
<div
|
||
className="text-xs font-bold"
|
||
style={{ color: "var(--text-primary)" }}
|
||
>
|
||
{day.maxTemp}°/{day.minTemp}°
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|