09185c2a2a
Some checks failed
Deploy / deploy (push) Has been cancelled
- Removes the date label from the greeting row (user request — тoo dense on tablet and redundant with TopBar clock). - Scrolling: drops overflowY: auto on the inner Events/Notes cards and removes flex: 1 / minHeight: 0 from their grid. On iPad-class touch nested scroll containers fought the root scroll; now only the root scrolls, which the browser handles natively. - TopBar: replaces hardcoded rgba(255,255,255,X) on sensor icons, chip background, chip border and header bottom-border with semantic tokens (--text-tertiary, --surface-2, --border-subtle, --hairline) so the thermometer/humidity/wind icons are visible in light theme.
108 lines
3.4 KiB
TypeScript
108 lines
3.4 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}`
|
|
}
|
|
|
|
|
|
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: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: '0 24px',
|
|
borderBottom: '1px solid var(--hairline)',
|
|
background: 'transparent',
|
|
flexShrink: 0,
|
|
position: 'relative',
|
|
zIndex: 5,
|
|
}}
|
|
>
|
|
{/* 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>
|
|
|
|
{/* Right: sensors + weather */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
{/* 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>
|
|
|
|
</>
|
|
)
|
|
}
|