daniil/smart-home-tablet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animated SVG weather icons + dynamic gradient background by weather/time
Some checks failed
Deploy / deploy (push) Failing after 2m6s
Details

Browse Source
This commit is contained in:
Cosmo
2026-04-22 20:09:13 +00:00
parent 408be1d0c4
commit 494126c7d4
4 changed files with 253 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/TopBar.tsx
View File

@@ -1,7 +1,8 @@
'use client'
import { useState, useEffect } from 'react'
import { Droplets, Wind, Thermometer, X, CloudRain, Snowflake, CloudLightning, Cloud, Sun, CloudSun } from 'lucide-react'
import { Droplets, Wind, Thermometer, X } from 'lucide-react'
import WeatherAnimation from '@/components/WeatherAnimation'
interface WeatherData {
temp: string
@@ -179,13 +180,13 @@ export default function TopBar({ weather, sensors, haConnected }: TopBarProps) {
position: 'relative', overflow: 'hidden',
}}>
{/* Background emoji */}
<div style={{ position: 'absolute', top: -10, right: 10, fontSize: 100, opacity: 0.08, pointerEvents: 'none' }}>
{getWeatherIcon(weather.desc)}
<div style={{ position: 'absolute', top: -5, right: 5, opacity: 0.1, pointerEvents: 'none' }}>
<WeatherAnimation condition={weather.desc} size={120} />
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative', zIndex: 1 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
<span style={{ fontSize: 56 }}>{getWeatherIcon(weather.desc)}</span>
<WeatherAnimation condition={weather.desc} size={72} />
<div>
<div style={{ fontSize: 48, fontWeight: 800, lineHeight: 1, letterSpacing: '-3px', color: 'var(--text-primary)' }}>
{weather.temp}°
@@ -275,7 +276,7 @@ export default function TopBar({ weather, sensors, haConnected }: TopBarProps) {
: '1px solid rgba(255,255,255,0.04)',
}}>
{/* Icon */}
<span style={{ fontSize: 28, flexShrink: 0 }}>{getWeatherIcon(day.desc)}</span>
<WeatherAnimation condition={day.desc} size={36} />
{/* Day info */}
<div style={{ flex: 1, minWidth: 0 }}>