'use client' import { useState, useEffect } from 'react' import { Droplets, Wind, Thermometer } from 'lucide-react' interface SensorData { temperature: number humidity: number pm25: number } interface TopBarProps { sensors: SensorData | null haConnected?: boolean } function formatTime(date: Date): string { return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' }) } function formatDate(date: Date): string { const weekday = date.toLocaleDateString('ru-RU', { weekday: 'long' }) const day = date.getDate() const month = date.toLocaleDateString('ru-RU', { month: 'long' }) return `${weekday}, ${day} ${month}` } function getGreeting(h: number): string { if (h >= 5 && h < 12) return 'Доброе утро' if (h >= 12 && h < 17) return 'Добрый день' if (h >= 17 && h < 22) return 'Добрый вечер' return 'Доброй ночи' } export default function TopBar({ sensors, haConnected }: TopBarProps) { const [time, setTime] = useState(() => new Date()) useEffect(() => { const t = setInterval(() => setTime(new Date()), 1000) return () => clearInterval(t) }, []) return ( <>
{/* Left: time + date */}
{formatTime(time)} {formatDate(time)}
{/* Center: greeting */}
{getGreeting(time.getHours())} 👋
{/* Right: sensors + weather */}
{/* HA status — 44px hit-zone wrapping 14px dot */}
{sensors && (
{sensors.temperature}° {sensors.humidity}% {sensors.pm25}
)}
) }