Custom app launcher, browser home page, and service monitor.
cute.haus
homelab
react
typescript
add glow for weather
Aly Raffauf
(Apr 26, 2026, 12:22 PM EDT)
67c135d3
44480087
+33
-5
+31
-3
src/components/Weather.tsx
+31
-3
src/components/Weather.tsx
···
33
33
return <Sun className={className} />;
34
34
}
35
35
36
+
function getWeatherTheme(forecast: string) {
37
+
const f = forecast.toLowerCase();
38
+
if (f.includes("thunder") || f.includes("lightning"))
39
+
return { tint: "from-purple-500/20", icon: "text-purple-300" };
40
+
if (f.includes("snow") || f.includes("flurr"))
41
+
return { tint: "from-cyan-300/20", icon: "text-cyan-200" };
42
+
if (f.includes("rain") || f.includes("shower") || f.includes("drizzle"))
43
+
return { tint: "from-blue-500/20", icon: "text-blue-300" };
44
+
if (f.includes("fog") || f.includes("mist") || f.includes("haze"))
45
+
return { tint: "from-slate-400/15", icon: "text-slate-300" };
46
+
if (f.includes("partly cloudy"))
47
+
return { tint: "from-amber-400/15", icon: "text-amber-200" };
48
+
if (
49
+
f.includes("mostly cloudy") ||
50
+
f.includes("cloud") ||
51
+
f.includes("overcast")
52
+
)
53
+
return { tint: "from-zinc-400/10", icon: "text-zinc-300" };
54
+
if (f.includes("sunny") || f.includes("clear"))
55
+
return { tint: "from-amber-500/20", icon: "text-amber-300" };
56
+
return { tint: "from-amber-500/20", icon: "text-amber-300" };
57
+
}
58
+
36
59
export function Weather() {
37
60
const [weather, setWeather] = useState<{
38
61
temperature: number;
···
69
92
return <div>Loading weather...</div>;
70
93
}
71
94
95
+
const theme = getWeatherTheme(weather.shortForecast);
96
+
72
97
return (
73
-
<div className="card p-4">
74
-
<div className="flex items-center gap-4">
75
-
{getWeatherIcon(weather.shortForecast, "w-12 h-12 text-zinc-300")}
98
+
<div className="card p-4 relative overflow-hidden">
99
+
<div
100
+
className={`absolute inset-0 bg-gradient-to-br ${theme.tint} to-transparent pointer-events-none`}
101
+
/>
102
+
<div className="relative flex items-center gap-4">
103
+
{getWeatherIcon(weather.shortForecast, `w-12 h-12 ${theme.icon}`)}
76
104
<div>
77
105
<div className="flex items-baseline gap-2">
78
106
<span className="text-4xl font-light">{weather.temperature}°</span>
+2
-2
src/index.css
+2
-2
src/index.css
···
11
11
12
12
body {
13
13
background:
14
-
radial-gradient(ellipse 120% 80% at 0% 0%, rgba(244, 63, 94, 0.12), transparent 70%),
15
-
radial-gradient(ellipse 120% 80% at 100% 100%, rgba(99, 102, 241, 0.12), transparent 70%),
14
+
radial-gradient(ellipse 120% 80% at 0% 0%, rgba(99, 102, 241, 0.12), transparent 70%),
15
+
radial-gradient(ellipse 120% 80% at 100% 100%, rgba(56, 189, 248, 0.10), transparent 70%),
16
16
linear-gradient(to bottom, #18181b, #0c0c0e);
17
17
background-attachment: fixed;
18
18
min-height: 100vh;