Weather Card

import { WeatherCard } from "@/components/ui/weather-card";
 
const weatherData = {
  coord: {
    lon: -122.4194,
    lat: 37.7749,
  },
  weather: [
    {
      id: 800,
      main: "Clear",
      description: "clear sky",
      icon: "01d",
    },
  ],
  main: {
    temp: 22,
    feels_like: 21,
    temp_min: 18,
    temp_max: 25,
    pressure: 1013,
    humidity: 60,
  },
  visibility: 10000,
  wind: {
    speed: 3.5,
    deg: 180,
  },
  dt: 1699641600,
  sys: {
    country: "US",
    sunrise: 1699622400,
    sunset: 1699660800,
  },
  timezone: -28800,
  name: "San Francisco",
  location: {
    city: "San Francisco",
    country: "United States",
    region: "California",
  },
};
 
export default function Example() {
  return <WeatherCard weatherData={weatherData} />;
}

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[];
}
 
interface WeatherLocation {
  city: string;
  country: string | null;
  region: string | null;
}
 
interface WeatherMain {
  temp: number; // Temperature in Celsius
  feels_like: number; // Feels like temperature in Celsius
  temp_min: number;
  temp_max: number;
  pressure: number; // Atmospheric pressure in hPa
  humidity: number; // Humidity percentage
}
 
interface WeatherWind {
  speed: number; // Wind speed in m/s
  deg: number; // Wind direction in degrees
}
 
interface WeatherCondition {
  id: number; // Weather condition ID
  main: string; // Weather parameter (Rain, Snow, Clear, etc.)
  description: string; // Weather description
  icon: string;
}
 
interface WeatherSys {
  country: string; // Country code
  sunrise: number; // Sunrise time (Unix timestamp)
  sunset: number; // Sunset time (Unix timestamp)
}
 
interface ForecastDay {
  date: string; // Date string (YYYY-MM-DD)
  timestamp: number; // Unix timestamp
  temp_min: number; // Minimum temperature
  temp_max: number; // Maximum temperature
  humidity: number; // Humidity percentage
  weather: {
    main: string;
    description: string;
    icon: string;
  };
}

<WeatherCard
  weatherData={weatherData}
  showForecast={false}
  showDetails={false}
/>

<WeatherCard weatherData={weatherData} defaultUnit="fahrenheit" />

<WeatherCard weatherData={weatherData} className="max-w-lg shadow-2xl" />

<WeatherCard
  weatherData={weatherDataWithForecast}
  showForecast={true}
  showDetails={true}
/>