e967924f1f
All checks were successful
Deploy / deploy (push) Successful in 2m43s
The big Доброе утро line on Home ate one row for marginal value. Moved it into TopBar as a center column via 3-col grid (1fr auto 1fr), so it appears on all tabs and leaves the Home body denser.
126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
'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 (
|
|
<>
|
|
<header
|
|
style={{
|
|
height: 72,
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr auto 1fr',
|
|
alignItems: 'center',
|
|
padding: '0 24px',
|
|
borderBottom: '1px solid var(--hairline)',
|
|
background: 'transparent',
|
|
flexShrink: 0,
|
|
position: 'relative',
|
|
zIndex: 5,
|
|
gap: 16,
|
|
}}
|
|
>
|
|
{/* Left: time + date */}
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
|
|
<span style={{
|
|
fontSize: 28, fontWeight: 700, color: 'var(--text-primary)',
|
|
letterSpacing: '-1px', fontVariantNumeric: 'tabular-nums',
|
|
}}>
|
|
{formatTime(time)}
|
|
</span>
|
|
<span style={{
|
|
fontSize: 14, color: 'var(--text-secondary)',
|
|
fontWeight: 400, textTransform: 'capitalize',
|
|
}}>
|
|
{formatDate(time)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Center: greeting */}
|
|
<div style={{
|
|
fontSize: 17, fontWeight: 700, color: 'var(--text-primary)',
|
|
letterSpacing: '-0.3px', justifySelf: 'center',
|
|
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
|
|
maxWidth: '100%',
|
|
}}>
|
|
{getGreeting(time.getHours())} <span style={{ fontSize: 16 }}>👋</span>
|
|
</div>
|
|
|
|
{/* Right: sensors + weather */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, justifySelf: 'end' }}>
|
|
{/* HA status */}
|
|
<div title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'} style={{
|
|
width: 10, height: 10, borderRadius: '50%',
|
|
background: haConnected ? '#34d399' : '#f87171',
|
|
boxShadow: haConnected ? '0 0 8px rgba(52,211,153,0.5)' : '0 0 8px rgba(248,113,113,0.5)',
|
|
transition: 'all 0.5s ease',
|
|
flexShrink: 0,
|
|
}} />
|
|
|
|
{sensors && (
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: 4,
|
|
padding: '8px 14px', borderRadius: 14,
|
|
background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
|
|
}}>
|
|
<Thermometer size={14} color="var(--text-tertiary)" />
|
|
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
|
|
{sensors.temperature}°
|
|
</span>
|
|
<Droplets size={14} color="var(--text-tertiary)" />
|
|
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
|
|
{sensors.humidity}%
|
|
</span>
|
|
<Wind size={14} color="var(--text-tertiary)" />
|
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
|
{sensors.pm25}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</header>
|
|
|
|
</>
|
|
)
|
|
}
|