Weather

1import React from "react";
2import { Location01Icon } from "@hugeicons/core-free-icons";
3import { HugeiconsIcon } from "@hugeicons/react";
4 
5interface WeatherCardProps {
6  currentTemp: number;
7  condition: string;
8  location: string;
9  weeklyForecast: {
10    day: string;
11    tempHigh: number;
12    tempLow: number;
13    icon: string;
14  }[];
15  humidity: number;
16  windSpeed: number;
17  feelsLike: number;
18}
19// need to fix this
20const WeatherCard: React.FC<WeatherCardProps> = ({
21  currentTemp,
22  condition,
23  location,
24  weeklyForecast,
25  humidity,
26  windSpeed,
27  feelsLike,
28}) => {
29  return (
30    <div className="w-full max-w-md">
31      <div className="rounded-lg border bg-card text-card-foreground shadow-xs">
32        <div className="h-32 bg-gradient-to-t relative border-b pb-4">
33          <div className="absolute inset-0 flex items-center justify-center">
34            <div className="rounded-full p-3 text-4xl font-bold">
35              {currentTemp}°C
36            </div>
37          </div>
38          <div className="absolute top-2 left-4 text-md font-medium text-foreground flex items-center gap-1">
39            <HugeiconsIcon icon={Location01Icon} size={18} />
40            {location}
41          </div>
42          <div className="absolute bottom-2 right-4 text-lg font-medium text-foreground">
43            {condition}
44          </div>
45        </div>
46        <div className="p-4 grid grid-cols-7 gap-2">
47          {weeklyForecast.map((day, index) => (
48            <div key={index} className="text-center">
49              <p className="text-sm text-muted-foreground">{day.day}</p>
50              <div className="text-2xl">{day.icon}</div>
51              <p className="text-xs text-muted-foreground">
52                {day.tempHigh}°/{day.tempLow}°
53              </p>
54            </div>
55          ))}
56        </div>
57        <div className="p-4 grid grid-cols-3 gap-4">
58          <div className="text-center">
59            <p className="text-sm text-muted-foreground flex items-center justify-center">
60              💧 Humidity
61            </p>
62            <p className="text-lg font-medium">{humidity}%</p>
63          </div>
64          <div className="text-center">
65            <p className="text-sm text-muted-foreground flex items-center justify-center">
66              💨 Wind
67            </p>
68            <p className="text-lg font-medium">{windSpeed} km/h</p>
69          </div>
70          <div className="text-center">
71// … truncated