Weather Card

1"use client";
2 
3import type React from "react";
4import { useMemo, useState } from "react";
5import {
6	HugeiconsIcon,
7	Location01Icon,
8	SunriseIcon,
9	SunsetIcon,
10	ThermometerIcon,
11} from "@/components/icons";
12import { Button } from "@/components/ui/button";
13import {
14	DropdownMenu,
15	DropdownMenuContent,
16	DropdownMenuLabel,
17	DropdownMenuSeparator,
18	DropdownMenuTrigger,
19} from "@/components/ui/dropdown-menu";
20import { cn } from "@/lib/utils";
21import { WeatherDetailItem } from "@/registry/new-york/ui/weather-detail-item";
22import {
23	CloudAngledRainIcon,
24	CloudAngledZapIcon,
25	CloudFogIcon,
26	CloudIcon,
27	CloudLittleRainIcon,
28	CloudSnowIcon,
29	DropletIcon,
30	FastWindIcon,
31	Moon02Icon,
32	Sun03Icon,
33	Tornado02Icon,
34	VisionIcon,
35} from "@/registry/new-york/ui/weather-icons";
36 
37export interface WeatherLocation {
38	city: string;
39	country: string | null;
40	region: string | null;
41}
42 
43export interface WeatherMain {
44	temp: number;
45	feels_like: number;
46	temp_min: number;
47	temp_max: number;
48	pressure: number;
49	humidity: number;
50}
51 
52export interface WeatherWind {
53	speed: number;
54	deg: number;
55}
56 
57export interface WeatherCondition {
58	id: number;
59	main: string;
60	description: string;
61	icon: string;
62}
63 
64export interface WeatherSys {
65	country: string;
66	sunrise: number;
67	sunset: number;
68}
69 
70export interface ForecastDay {
71	date: string;
72	timestamp: number;
73	temp_min: number;
74	temp_max: number;
75	humidity: number;
76	weather: {
77		main: string;
78		description: string;
79		icon: string;
80	};
81}
82 
83export interface WeatherData {
84	coord?: {
85		lon: number;
86		lat: number;
87	};
88	weather: WeatherCondition[];
89	main: WeatherMain;
90	visibility?: number;
91	wind: WeatherWind;
92	dt: number;
93	sys: WeatherSys;
94	timezone: number;
95	name: string;
96	location: WeatherLocation;
97	forecast?: ForecastDay[];
98}
99 
100export interface WeatherCardProps {
101	weatherData: WeatherData;
102	className?: string;
103	showForecast?: boolean;
104	showDetails?: boolean;
105	defaultUnit?: "celsius" | "fahrenheit";
106}
107 
108// Helper function to convert timestamp to readable time
109const formatTime = (timestamp: number, timezone: number): string => {
110	const date = new Date((timestamp + timezone) * 1000);
111	return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
112};
113 
114// Helper function to convert celsius to fahrenheit
115const celsiusToFahrenheit = (celsius: number): number => {
116	return (celsius * 9) / 5 + 32;
117};
118 
119// Helper function to get day of week from date string
120const getDayOfWeek = (dateStr: string): string => {
121	const date = new Date(dateStr);
122// … truncated