Weather Widgets

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { Cloud, CloudRain, Sun, CloudSnow, Wind, Droplets, Thermometer, Moon } from "lucide-react";
5import { GlassWidgetBase } from "./base-widget";
6 
7type WeatherCondition = "sunny" | "cloudy" | "rainy" | "snowy" | "night" | "night-cloudy";
8 
9const WeatherIcon = ({
10  condition,
11  className,
12}: {
13  condition: WeatherCondition;
14  className?: string;
15}) => {
16  switch (condition) {
17    case "sunny":
18      return <Sun className={cn("text-amber-400", className)} />;
19    case "cloudy":
20      return <Cloud className={cn("text-gray-400", className)} />;
21    case "rainy":
22      return <CloudRain className={cn("text-blue-400", className)} />;
23    case "snowy":
24      return <CloudSnow className={cn("text-blue-200", className)} />;
25    case "night":
26      return <Moon className={cn("text-blue-300", className)} />;
27    case "night-cloudy":
28      return <Cloud className={cn("text-gray-500", className)} />;
29    default:
30      return <Sun className={cn("text-amber-400", className)} />;
31  }
32};
33 
34interface WeatherWidgetProps {
35  temperature: number;
36  condition: string;
37  icon?: "sun" | "cloud" | "rain" | "snow" | "wind";
38  location?: string;
39  className?: string;
40}
41 
42function WeatherWidget({
43  temperature,
44  condition,
45  icon = "sun",
46  location,
47  className,
48}: WeatherWidgetProps) {
49  const iconMap = {
50    sun: Sun,
51    cloud: Cloud,
52    rain: CloudRain,
53    snow: CloudSnow,
54    wind: Wind,
55  };
56 
57  const Icon = iconMap[icon];
58  const glowColors = {
59    sun: "amber",
60    cloud: "blue",
61    rain: "cyan",
62    snow: "purple",
63    wind: "blue",
64  } as const;
65 
66  return (
67    <GlassWidgetBase className={cn("min-w-48", className)} size="md" glowColor={glowColors[icon]}>
68      {location && <div className="text-white/60 text-sm mb-2">{location}</div>}
69      <div className="flex items-center justify-between">
70        <div className="flex items-center gap-3">
71          <div className="p-2 rounded-xl bg-white/10">
72            <Icon className="w-8 h-8 text-white" />
73          </div>
74          <div>
75            <div className="text-4xl font-light text-white">{temperature}°</div>
76            <div className="text-white/70 text-sm">{condition}</div>
77          </div>
78        </div>
79      </div>
80    </GlassWidgetBase>
81  );
82}
83 
84interface CurrentWeatherWidgetProps {
85  location: string;
86  temperature: number;
87  feelsLike?: number;
88  high?: number;
89  low?: number;
90  condition?: WeatherCondition;
91  humidity?: number;
92  windSpeed?: number;
93// … truncated