Add weather widgets to homepage

components/WeatherWidget.tsx

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react';
+
+const WeatherWidget = ({ location }) => {
+  const [weatherData, setWeatherData] = useState(null);
+
+  useEffect(() => {
+    const fetchWeatherData = async () => {
+      // Fetch weather data for the specified location using an API
+      // Set the weather data in the state variable
+    };
+
+    fetchWeatherData();
+  }, [location]);
+
+  const formatWeatherData = (data) => {
+    // Format the weather data
+    // Return the formatted data
+  };
+
+  return (
+    <div>
+      {/* Render the formatted weather data */}
+    </div>
+  );
+};
+
+export default WeatherWidget;

components/WeatherWidgetContainer.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import WeatherWidget from './WeatherWidget';
+
+const WeatherWidgetContainer = () => {
+  const locations = ['London', 'Edinburgh', 'Alicante'];
+
+  return (
+    <div>
+      {locations.map((location) => (
+        <WeatherWidget key={location} location={location} />
+      ))}
+    </div>
+  );
+};
+
+export default WeatherWidgetContainer;

components/utils/api.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+const BASE_URL = 'https://api.weatherapi.com/v1';
+
+export const fetchWeatherData = async (location: string) => {
+  try {
+    const response = await axios.get(`${BASE_URL}/weather`, {
+      params: {
+        key: 'YOUR_API_KEY',
+        q: location,
+      },
+    });
+
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching weather data:', error);
+    throw error;
+  }
+};

components/utils/format.ts

@@ -0,0 +1,13 @@
+export const formatWeatherData = (weatherData: any) => {
+  const temperature = weatherData.current.temp_c;
+  const humidity = weatherData.current.humidity;
+  const windSpeed = weatherData.current.wind_kph;
+
+  const formattedWeatherData = {
+    temperature: `${temperature}°C`,
+    humidity: `${humidity}%`,
+    windSpeed: `${windSpeed} km/h`,
+  };
+
+  return formattedWeatherData;
+};