Weather Widget

1"use client";
2 
3import { useEffect, useRef, useState, useCallback } from "react";
4import {
5  Sun,
6  Cloud,
7  CloudSun,
8  CloudFog,
9  CloudDrizzle,
10  CloudRain,
11  CloudLightning,
12  Snowflake,
13  CloudHail,
14  Wind,
15  type LucideIcon,
16} from "lucide-react";
17import { cn } from "@/lib/utils";
18import type {
19  ForecastDay,
20  TemperatureUnit,
21  WeatherConditionCode,
22} from "./schema-runtime";
23import {
24  getSceneBrightnessFromTimeOfDay,
25  getTimeOfDay,
26  getWeatherTheme,
27} from "./generated/weather-runtime-core.generated";
28import {
29  resolveGlassBackdropFilterStyles,
30  useGlassStyles,
31} from "./generated/weather-runtime-core.generated";
32 
33type WeatherTheme = "light" | "dark";
34 
35function getPeakIntensity(timeOfDay: number): number {
36  const noonDistance = Math.abs(timeOfDay - 0.5);
37  const midnightDistance = Math.min(timeOfDay, 1 - timeOfDay);
38  const minDistance = Math.min(noonDistance, midnightDistance);
39  return Math.max(0, 1 - minDistance * 4);
40}
41 
42function sineEasedGradient(
43  x: number,
44  y: number,
45  radius: number,
46  peakOpacity: number,
47  steps = 8,
48): string {
49  const stops: string[] = [];
50  for (let i = 0; i <= steps; i++) {
51    const t = i / steps;
52    const eased = Math.sin((t * Math.PI) / 2);
53    const opacity = peakOpacity * (1 - eased);
54    const position = t * 100;
55    stops.push(
56      `rgba(255,255,255,${opacity.toFixed(4)}) ${position.toFixed(1)}%`,
57    );
58  }
59  return `radial-gradient(circle ${radius}px at ${x}px ${y}px, ${stops.join(", ")})`;
60}
61 
62const conditionIcons: Record<WeatherConditionCode, LucideIcon> = {
63  clear: Sun,
64  "partly-cloudy": CloudSun,
65  cloudy: Cloud,
66  overcast: Cloud,
67  fog: CloudFog,
68  drizzle: CloudDrizzle,
69  rain: CloudRain,
70  "heavy-rain": CloudRain,
71  thunderstorm: CloudLightning,
72  snow: Snowflake,
73  sleet: CloudHail,
74  hail: CloudHail,
75  windy: Wind,
76};
77 
78export interface GlassEffectParams {
79  enabled?: boolean;
80  depth?: number;
81  strength?: number;
82  chromaticAberration?: number;
83  blur?: number;
84  brightness?: number;
85  saturation?: number;
86}
87 
88export interface WeatherDataOverlayProps {
89  location: string;
90  conditionCode: WeatherConditionCode;
91  temperature: number;
92  tempHigh: number;
93  tempLow: number;
94  forecast?: ForecastDay[];
95  unit?: TemperatureUnit;
96  theme?: WeatherTheme;
97  /**
98   * Provide either `timeOfDay` (0-1) or a `timestamp` ISO string.
99   * If neither is provided, defaults to noon (0.5).
100   */
101  timeOfDay?: number;
102  timestamp?: string | undefined;
103  className?: string;
104  reducedMotion?: boolean;
105  /**
106// … truncated