50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T45f6,"use client"; import type React from "react"; import { useMemo, useState } from "react"; import { HugeiconsIcon, Location01Icon, SunriseIcon, SunsetIcon, ThermometerIcon, } from "@/components/icons"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { cn } from "@/lib/utils"; import { WeatherDetailItem } from "@/registry/new-york/ui/weather-detail-item"; import { CloudAngledRainIcon, CloudAngledZapIcon, CloudFogIcon, CloudIcon, CloudLittleRainIcon, CloudSnowIcon, DropletIcon, FastWindIcon, Moon02Icon, Sun03Icon, Tornado02Icon, VisionIcon, } from "@/registry/new-york/ui/weather-icons"; export interface WeatherLocation { city: string; country: string | null; region: string | null; } export interface WeatherMain { temp: number; feels_like: number; temp_min: number; temp_max: number; pressure: number; humidity: number; } export interface WeatherWind { speed: number; deg: number; } export interface WeatherCondition { id: number; main: string; description: string; icon: string; } export interface WeatherSys { country: string; sunrise: number; sunset: number; } export interface ForecastDay { date: string; timestamp: number; temp_min: number; temp_max: number; humidity: number; weather: { main: string; description: string; icon: string; }; } export interface WeatherData { coord?: { lon: number; lat: number; }; weather: WeatherCondition[]; main: WeatherMain; visibility?: number; wind: WeatherWind; dt: number; sys: WeatherSys; timezone: number; name: string; location: WeatherLocation; forecast?: ForecastDay[]; } export interface WeatherCardProps { weatherData: WeatherData; className?: string; showForecast?: boolean; showDetails?: boolean; defaultUnit?: "celsius" | "fahrenheit"; } // Helper function to convert timestamp to readable time const formatTime = (timestamp: number, timezone: number): string => { const date = new Date((timestamp + timezone) * 1000); return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); }; // Helper function to convert celsius to fahrenheit const celsiusToFahrenheit = (celsius: number): number => { return (celsius * 9) / 5 + 32; }; // Helper function to get day of week from date string const getDayOfWeek = (dateStr: string): string => { const date = new Date(dateStr); return date.toLocaleDateString("en-US", { weekday: "long" }); }; // Helper function to get weather icon component const getWeatherIcon = (main: string, className: string = "", fill = "") => { switch (main.toLowerCase()) { case "thunderstorm": return ; case "drizzle": return ; case "rain": return ; case "snow": return ; case "haze": return ; case "mist": case "smoke": case "dust": case "sand": case "ash": case "squall": return ; case "fog": return ; case "tornado": return ; case "clear": return ; case "clouds": return ; default: return ; } }; export const WeatherCard: React.FC = ({ weatherData, className, showForecast = true, showDetails = true, defaultUnit = "celsius", }) => { const [useFahrenheit, setUseFahrenheit] = useState( defaultUnit === "fahrenheit", ); const [forecastExpanded, setForecastExpanded] = useState(true); const [detailsExpanded, setDetailsExpanded] = useState(false); const temp = weatherData.main.temp; const feelsLike = weatherData.main.feels_like; const weatherId = weatherData.weather[0].id; const sunriseTime = formatTime(weatherData.sys.sunrise, weatherData.timezone); const sunsetTime = formatTime(weatherData.sys.sunset, weatherData.timezone); // Convert temperature based on selected unit const displayTemp = useFahrenheit ? Math.round(celsiusToFahrenheit(temp)) : Math.round(temp); const displayFeelsLike = useFahrenheit ? Math.round(celsiusToFahrenheit(feelsLike)) : Math.round(feelsLike); // Determine the weather theme based on weather conditions const weatherTheme = useMemo(() => { // weather condition codes: https://openweathermap.org/weather-conditions if (weatherId >= 200 && weatherId < 300) { return { name: "Thunderstorm", icon: , gradient: "bg-gradient-to-br from-slate-800/80 to-purple-900/80", colorCode: "#FCD34D", }; } else if (weatherId >= 300 && weatherId < 400) { return { name: "Drizzle", icon: , gradient: "bg-gradient-to-br from-slate-700/80 to-blue-800/80", colorCode: "#93C5FD", }; } else if (weatherId >= 500 && weatherId < 600) { return { name: "Rain", icon: , gradient: "bg-gradient-to-br from-slate-800/80 to-blue-900/80", colorCode: "#60A5FA", }; } else if (weatherId >= 600 && weatherId < 700) { return { name: "Snow", icon: , gradient: "bg-gradient-to-br from-blue-100/80 to-indigo-300/80", colorCode: "#E0F2FE", }; } else if (weatherId >= 700 && weatherId < 800) { // Atmospheric conditions if (weatherId === 701) { return { name: "Mist", icon: , gradient: "bg-gradient-to-br from-slate-400/80 to-slate-500/80", colorCode: "#D1D5DB", }; } else if (weatherId === 711) { return { name: "Smoke", icon: , gradient: "bg-gradient-to-br from-gray-500/80 to-gray-700/80", colorCode: "#9CA3AF", }; } else if (weatherId === 721) { return { name: "Haze", icon: , gradient: "bg-gradient-to-br from-amber-300/80 to-amber-500/80", colorCode: "#FDE68A", }; } else if (weatherId === 731 || weatherId === 761) { return { name: "Dust", icon: , gradient: "bg-gradient-to-br from-yellow-400/80 to-yellow-600/80", colorCode: "#FEF08A", }; } else if (weatherId === 741) { return { name: "Fog", icon: , gradient: "bg-gradient-to-br from-gray-400/80 to-gray-600/80", colorCode: "#D1D5DB", }; } else if (weatherId === 751) { return { name: "Sand", icon: , gradient: "bg-gradient-to-br from-orange-300/80 to-orange-500/80", colorCode: "#FDBA74", }; } else if (weatherId === 762) { return { name: "Volcanic Ash", icon: , gradient: "bg-gradient-to-br from-zinc-600/80 to-zinc-800/80", colorCode: "#D4D4D8", }; } else if (weatherId === 771) { return { name: "Squall", icon: , gradient: "bg-gradient-to-br from-blue-500/80 to-blue-700/80", colorCode: "#93C5FD", }; } else if (weatherId === 781) { return { name: "Tornado", icon: , gradient: "bg-gradient-to-br from-slate-600/80 to-slate-900/80", colorCode: "#CBD5E1", }; } else { return { name: "Atmosphere", icon: , gradient: "bg-gradient-to-br from-slate-400/80 to-slate-600/80", colorCode: "#D1D5DB", }; } } else if (weatherId === 800) { return { name: "Clear", icon: , gradient: "bg-gradient-to-br from-yellow-500/80 to-orange-500/80", colorCode: "#FBBF24", }; } else if (weatherId >= 801 && weatherId <= 802) { return { name: "Partly Cloudy", icon: , gradient: "bg-gradient-to-br from-blue-400/80 to-blue-600/80", colorCode: "#E5E7EB", }; } else if (weatherId >= 803 && weatherId <= 804) { return { name: "Cloudy", icon: , gradient: "bg-gradient-to-br from-slate-500/80 to-slate-700/80", colorCode: "#E5E7EB", }; } else { return { name: "Unknown", icon: , gradient: "bg-gradient-to-br from-slate-500/80 to-slate-700/80", colorCode: "#E5E7EB", }; } }, [weatherId]); return (

{/* Location Info */}

{weatherData.location.city} {weatherData.location.region ? `, ${weatherData.location.region}` : ""}

{weatherData.location.country}

Temperature Unit

{/* Main Weather Display */}

{weatherTheme.icon}

{displayTemp}° {useFahrenheit ? "F" : "C"}

Feels like: {displayFeelsLike}°

{weatherData.weather[0].description}

{/* Weather Forecast */} {showForecast && weatherData.forecast && weatherData.forecast.length > 0 && (

{forecastExpanded && (

{weatherData.forecast.map((day, idx) => { const dayTemp = useFahrenheit ? Math.round(celsiusToFahrenheit(day.temp_max)) : Math.round(day.temp_max); const nightTemp = useFahrenheit ? Math.round(celsiusToFahrenheit(day.temp_min)) : Math.round(day.temp_min); return (

{getWeatherIcon( day.weather.main, "h-7 w-7", weatherTheme.colorCode, )}

{getDayOfWeek(day.date)}

{dayTemp}°

{nightTemp}°

); })}

)}

)} {/* Weather Details */} {showDetails && (

{detailsExpanded && (

{[ { icon: ( ), label: "Wind", value: `${weatherData.wind.speed} m/s`, tooltipText: "Wind speed in meters per second", }, { icon: ( ), label: "Humidity", value: `${weatherData.main.humidity}%`, tooltipText: "Amount of water vapor in the air", }, ...(weatherData.visibility ? [ { icon: ( ), label: "Visibility", value: `${(weatherData.visibility / 1000).toFixed( 1, )} km`, tooltipText: "Maximum visibility distance", }, ] : []), { icon: ( ), label: "Pressure", value: `${weatherData.main.pressure} hPa`, tooltipText: "Atmospheric pressure in hectopascals", }, { icon: ( ), label: "Sunrise", value: sunriseTime, tooltipText: "Time when the sun rises above the horizon", }, { icon: ( ), label: "Sunset", value: sunsetTime, tooltipText: "Time when the sun disappears below the horizon", }, ].map((detail, index) => ( ))}

)}

); }; 53:T47f,"use client"; import type React from "react"; import type { ReactNode } from "react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; export interface WeatherDetailItemProps { icon: ReactNode; label: string; value: string; tooltipText?: string; highlight: string; } export const WeatherDetailItem: React.FC = ({ icon, label, value, tooltipText, highlight, }) => { return (

{label}

{value}

{icon}

{tooltipText && (

{tooltipText}

)}

); }; 54:T2ee9,import type React from "react"; export interface IconProps extends React.SVGProps { color?: string; } export const CloudAngledZapIcon: React.FC = (props) => ( ); export const CloudLittleRainIcon: React.FC = (props) => ( ); export const CloudAngledRainIcon: React.FC = (props) => ( ); export const CloudSnowIcon: React.FC = (props) => ( ); export const CloudFogIcon: React.FC = (props) => ( ); export const CloudIcon: React.FC = (props) => ( ); export const FastWindIcon: React.FC = (props) => ( ); export const Sun03Icon: React.FC = (props) => ( ); export const Moon02Icon: React.FC = (props) => ( ); export const Tornado02Icon: React.FC = (props) => ( ); export const DropletIcon: React.FC = (props) => ( ); export const VisionIcon: React.FC = (props) => ( ); 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@gaia","registryDependencies":["icons"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york/ui/weather-card.tsx","content":"$52","type":"registry:ui"},{"path":"registry/new-york/ui/weather-detail-item.tsx","content":"$53","type":"registry:ui"},{"path":"registry/new-york/ui/weather-icons.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]