changed to weekly from hourly

components/DailyCard/DailyCard.tsx

@@ -0,0 +1,17 @@
+import { DailyCardPropType } from "@/types/types"
+import WeatherIcon from "../WeatherIcon"
+import DailyTemp from "./DailyTemp"
+import DailyTime from "./DailyTime";
+
+export default function DailyCard(props: DailyCardPropType) {
+    const time = props.time;
+    const weatherCode = props.weatherCode
+    const temperature = props.temperature
+    return (
+        <div className="m-2 text-center shadow-md border-slate-200 border-2 rounded">
+            <WeatherIcon weatherCode={weatherCode}/>
+            <DailyTemp temperature={temperature} />
+            <DailyTime time={time} />
+        </div>
+    )
+};

components/DailyCard/DailyTemp.tsx

@@ -0,0 +1,7 @@
+
+export default function DailyTemp(props: {temperature: number;}) {
+    const feels = props.temperature;
+    return (
+    <p className="my-2">{feels}°C</p>
+    )
+}

components/DailyCard/DailyTime.tsx

@@ -0,0 +1,7 @@
+import { headers } from "next/headers";
+
+export default function DailyTime(props: {time: string}) {
+    return(
+        <p>{props.time}</p>
+    )
+}

components/HourlyCard/HourlyCard.tsx

@@ -1,5 +1,5 @@
 import { HourlyCardPropType } from "@/types/types"
-import WeatherIcon from "./WeatherIcon"
+import WeatherIcon from "../WeatherIcon"
 import HourlyTemp from "./HourlyTemp"
 import HourlyTime from "./HourlyTime";
 

components/WeatherHero.tsx

@@ -85,7 +85,7 @@ export default function WeatherHero() {
     const weatherCode = weather.current.weather_code;
     return(
     <>
-    <Image className="h-1/3 mx-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
+    <Image className="h-64 mx-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
     </>
 )
 };

components/WeatherIcon.tsx

@@ -1,15 +1,15 @@
 import Image from "next/image";
-import cloudAndLightening from '../../public/cloud-and-lightening.svg'
+import cloudAndLightening from '../public/cloud-and-lightening.svg'
-import cloudAndMoon from '../../public/cloud-and-moon.svg'
+import cloudAndMoon from '../public/cloud-and-moon.svg'
-import cloudAndRain from '../../public/cloud-and-rain.svg'
+import cloudAndRain from '../public/cloud-and-rain.svg'
-import cloudAndSnow from '../../public/cloud-and-snow.svg'
+import cloudAndSnow from '../public/cloud-and-snow.svg'
-import cloudAndWind from '../../public/cloud-and-wind.svg'
+import cloudAndWind from '../public/cloud-and-wind.svg'
-import cloudSnowRain from '../../public/cloud-snow-rain.svg'
+import cloudSnowRain from '../public/cloud-snow-rain.svg'
-import cloudAndSun from '../../public/cloud-and-sun.svg'
+import cloudAndSun from '../public/cloud-and-sun.svg'
-import cloudWindRain from '../../public/cloud-wind-rain.svg'
+import cloudWindRain from '../public/cloud-wind-rain.svg'
-import cloud from '../../public/cloud.svg'
+import cloud from '../public/cloud.svg'
-import moon from '../../public/moon.svg'
+import moon from '../public/moon.svg'
-import sun from '../../public/sun.svg'
+import sun from '../public/sun.svg'
 
 
 
@@ -81,8 +81,8 @@ function getCurrentWeatherIcon(weatherCode: number) {
 export default function WeatherIcon(props: {weatherCode: number}) {
     const weatherCode = props.weatherCode
     return (
-    <div className="p-2">
+    <div className="p-2 h-16">
-        <Image src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
+        <Image className="h-12" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
     </div>
 )
 };

components/WeatherNow.tsx

@@ -2,12 +2,12 @@
 
 import { getHourlyForecast } from "@/app/actions";
 import Temperature from "./Temperature";
-import { HourlyCardPropType, HourlyForecast, WeatherContextType } from "@/types/types";
+import { Forecast, WeatherContextType } from "@/types/types";
 import { createContext, useContext, useEffect, useState } from "react";
 import { defaultHourlyForecast } from "@/app/defaultState";
 import { LocationContext } from "@/context/LocationContext";
 import WeatherHero from "./WeatherHero";
-import HourlyCard from "./HourlyCard/HourlyCard";
+import DailyCard from "./DailyCard/DailyCard";
 
 export const WeatherContext = createContext<WeatherContextType>({
   weather: defaultHourlyForecast,
@@ -17,7 +17,7 @@ export const WeatherContext = createContext<WeatherContextType>({
 
 export default function WeatherNow() {
   const { geoLocation } = useContext(LocationContext);
-  const [weather, setWeather] = useState<HourlyForecast>(defaultHourlyForecast);
+  const [weather, setWeather] = useState<Forecast>(defaultHourlyForecast);
   const contextValue: WeatherContextType = {
     weather,
     setWeather,
@@ -37,19 +37,21 @@ export default function WeatherNow() {
   return (
     <div className="text-center">
       <h1 className="my-4 text-2xl">
-        Here is the current weather in {geoLocation.name}
+        Here is the current weather today in {geoLocation.name}
       </h1>
       <WeatherContext.Provider value={contextValue}>
         <WeatherHero />
         <Temperature />
-        <div className="flex flex-wrap h-full">
+        <h2 className="mt-4 text-xl">And the forecast for the coming week</h2>
-          {weather.hourly && weather.hourly.apparent_temperature.map((temp, index) => (
+        <div className="flex h-full">
-            index < 12 && // Ensure we only render the first 12 hours
+          {weather.daily && weather.daily.apparent_temperature_max.map((temp, index) => (
-            <HourlyCard
+            index > 0 && 
+            index < 7 && // Ensure we only render the next 6 days
+            <DailyCard
               key={index}
               temperature={temp}
-              weatherCode={weather.hourly.weather_code[index]}
+              weatherCode={weather.daily.weather_code[index]}
-              time={weather.hourly.time[index]}
+              time={weather.daily.time[index]}
             />
           ))}
         </div>

types/types.ts

@@ -1,46 +1,4 @@
 export interface Forecast {
-  coord: {
-    lon: number;
-    lat: number;
-  };
-  weather: Array<{
-    id: number;
-    main: string;
-    description: string;
-    icon: string;
-  }>;
-  base: string;
-  main: {
-    temp: number;
-    feels_like: number;
-    temp_min: number;
-    temp_max: number;
-    pressure: number;
-    humidity: number;
-  };
-  visibility: number;
-  wind: {
-    speed: number;
-    deg: number;
-  };
-  clouds: {
-    all: number;
-  };
-  dt: number;
-  sys: {
-    type: number;
-    id: number;
-    country: string;
-    sunrise: number;
-    sunset: number;
-  };
-  timezone: number;
-  id: number;
-  name: string;
-  cod: number;
-}
-
-export interface HourlyForecast {
   latitude: number;
   longitude: number;
   generationtime_ms: number;
@@ -210,8 +168,8 @@ export interface LocationContextType {
 }
 
 export interface WeatherContextType {
-  weather: HourlyForecast;
+  weather: Forecast;
-  setWeather: React.Dispatch<React.SetStateAction<HourlyForecast>>;
+  setWeather: React.Dispatch<React.SetStateAction<Forecast>>;
 }
 
 export interface HourlyCardPropType {
@@ -219,3 +177,8 @@ export interface HourlyCardPropType {
   weatherCode: number;
   time: string;
 }
+export interface DailyCardPropType {
+  temperature: number;
+  weatherCode: number;
+  time: string;
+}