125 lines
3.4 KiB
TypeScript
125 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { motion } from "framer-motion";
|
|
import ThemeToggle from "./ThemeToggle";
|
|
|
|
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 "🌤️";
|
|
}
|
|
|
|
interface Props {
|
|
isDark: boolean;
|
|
onToggleTheme: () => void;
|
|
weather: any;
|
|
}
|
|
|
|
export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
|
const [time, setTime] = useState("");
|
|
const [date, setDate] = useState("");
|
|
|
|
useEffect(() => {
|
|
const update = () => {
|
|
const now = new Date();
|
|
setTime(
|
|
now.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" })
|
|
);
|
|
setDate(
|
|
now.toLocaleDateString("ru-RU", {
|
|
weekday: "short",
|
|
day: "numeric",
|
|
month: "long",
|
|
})
|
|
);
|
|
};
|
|
update();
|
|
const id = setInterval(update, 1000);
|
|
return () => clearInterval(id);
|
|
}, []);
|
|
|
|
return (
|
|
<motion.div
|
|
className="glass-card px-6 py-3 flex items-center justify-between no-select"
|
|
style={{ borderRadius: "20px" }}
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
{/* Time & Date */}
|
|
<div className="flex items-baseline gap-4">
|
|
<span
|
|
className="font-black tracking-tight leading-none"
|
|
style={{ fontSize: "42px", color: "var(--text-primary)" }}
|
|
>
|
|
{time}
|
|
</span>
|
|
<span
|
|
className="text-sm font-medium capitalize"
|
|
style={{ color: "var(--text-secondary)" }}
|
|
>
|
|
{date}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Weather pill */}
|
|
{weather && (
|
|
<motion.div
|
|
className="flex items-center gap-3 px-5 py-2 rounded-2xl"
|
|
style={{
|
|
background: "rgba(59,130,246,0.1)",
|
|
border: "1px solid rgba(59,130,246,0.22)",
|
|
}}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: 0.3 }}
|
|
>
|
|
<span className="text-2xl leading-none">
|
|
{getWeatherEmoji(weather.weatherCode)}
|
|
</span>
|
|
<div>
|
|
<div
|
|
className="text-xl font-black leading-tight"
|
|
style={{ color: "var(--text-primary)" }}
|
|
>
|
|
{weather.temp}°C
|
|
</div>
|
|
<div
|
|
className="text-xs leading-tight"
|
|
style={{ color: "var(--text-secondary)" }}
|
|
>
|
|
{weather.desc}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Theme toggle */}
|
|
<div className="flex items-center gap-3">
|
|
{weather?.demo && (
|
|
<span
|
|
className="text-xs px-2.5 py-1 rounded-full font-semibold"
|
|
style={{
|
|
background: "rgba(245,158,11,0.15)",
|
|
color: "#f59e0b",
|
|
border: "1px solid rgba(245,158,11,0.3)",
|
|
}}
|
|
>
|
|
Demo
|
|
</span>
|
|
)}
|
|
<ThemeToggle isDark={isDark} onToggle={onToggleTheme} />
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|