diff --git a/components/DailyCard/DailyCard.tsx b/components/DailyCard/DailyCard.tsx
new file mode 100644
index 0000000..f978c87
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ )
+};
\ No newline at end of file
diff --git a/components/DailyCard/DailyTemp.tsx b/components/DailyCard/DailyTemp.tsx
new file mode 100644
index 0000000..89788fc
--- /dev/null
+++ b/components/DailyCard/DailyTemp.tsx
@@ -0,0 +1,7 @@
+
+export default function DailyTemp(props: {temperature: number;}) {
+ const feels = props.temperature;
+ return (
+ {feels}°C
+ )
+}
\ No newline at end of file
diff --git a/components/DailyCard/DailyTime.tsx b/components/DailyCard/DailyTime.tsx
new file mode 100644
index 0000000..47e9e0d
--- /dev/null
+++ b/components/DailyCard/DailyTime.tsx
@@ -0,0 +1,7 @@
+import { headers } from "next/headers";
+
+export default function DailyTime(props: {time: string}) {
+ return(
+ {props.time}
+ )
+}
\ No newline at end of file
diff --git a/components/HourlyCard/HourlyCard.tsx b/components/HourlyCard/HourlyCard.tsx
index 4f1270e..82c6ec5 100644
--- a/components/HourlyCard/HourlyCard.tsx
+++ b/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";
diff --git a/components/WeatherHero.tsx b/components/WeatherHero.tsx
index eb03976..f577a24 100644
--- a/components/WeatherHero.tsx
+++ b/components/WeatherHero.tsx
@@ -85,7 +85,7 @@ export default function WeatherHero() {
const weatherCode = weather.current.weather_code;
return(
<>
-
+
>
)
};
\ No newline at end of file
diff --git a/components/HourlyCard/WeatherIcon.tsx b/components/WeatherIcon.tsx
similarity index 76%
rename from components/HourlyCard/WeatherIcon.tsx
rename to components/WeatherIcon.tsx
index d20b3df..88e8073 100644
--- a/components/HourlyCard/WeatherIcon.tsx
+++ b/components/WeatherIcon.tsx
@@ -1,15 +1,15 @@
import Image from "next/image";
-import cloudAndLightening from '../../public/cloud-and-lightening.svg'
-import cloudAndMoon from '../../public/cloud-and-moon.svg'
-import cloudAndRain from '../../public/cloud-and-rain.svg'
-import cloudAndSnow from '../../public/cloud-and-snow.svg'
-import cloudAndWind from '../../public/cloud-and-wind.svg'
-import cloudSnowRain from '../../public/cloud-snow-rain.svg'
-import cloudAndSun from '../../public/cloud-and-sun.svg'
-import cloudWindRain from '../../public/cloud-wind-rain.svg'
-import cloud from '../../public/cloud.svg'
-import moon from '../../public/moon.svg'
-import sun from '../../public/sun.svg'
+import cloudAndLightening from '../public/cloud-and-lightening.svg'
+import cloudAndMoon from '../public/cloud-and-moon.svg'
+import cloudAndRain from '../public/cloud-and-rain.svg'
+import cloudAndSnow from '../public/cloud-and-snow.svg'
+import cloudAndWind from '../public/cloud-and-wind.svg'
+import cloudSnowRain from '../public/cloud-snow-rain.svg'
+import cloudAndSun from '../public/cloud-and-sun.svg'
+import cloudWindRain from '../public/cloud-wind-rain.svg'
+import cloud from '../public/cloud.svg'
+import moon from '../public/moon.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 (
-
-
+
+
)
};
\ No newline at end of file
diff --git a/components/WeatherNow.tsx b/components/WeatherNow.tsx
index a2e05e4..9563103 100644
--- a/components/WeatherNow.tsx
+++ b/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
({
weather: defaultHourlyForecast,
@@ -17,7 +17,7 @@ export const WeatherContext = createContext({
export default function WeatherNow() {
const { geoLocation } = useContext(LocationContext);
- const [weather, setWeather] = useState(defaultHourlyForecast);
+ const [weather, setWeather] = useState(defaultHourlyForecast);
const contextValue: WeatherContextType = {
weather,
setWeather,
@@ -37,19 +37,21 @@ export default function WeatherNow() {
return (
- Here is the current weather in {geoLocation.name}
+ Here is the current weather today in {geoLocation.name}
-
- {weather.hourly && weather.hourly.apparent_temperature.map((temp, index) => (
- index < 12 && // Ensure we only render the first 12 hours
-
And the forecast for the coming week
+
+ {weather.daily && weather.daily.apparent_temperature_max.map((temp, index) => (
+ index > 0 &&
+ index < 7 && // Ensure we only render the next 6 days
+
))}
diff --git a/types/types.ts b/types/types.ts
index 0e1b801..6fb64b2 100644
--- a/types/types.ts
+++ b/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,12 +168,17 @@ export interface LocationContextType {
}
export interface WeatherContextType {
- weather: HourlyForecast;
- setWeather: React.Dispatch>;
+ weather: Forecast;
+ setWeather: React.Dispatch>;
}
export interface HourlyCardPropType {
temperature: number;
weatherCode: number;
time: string;
+}
+export interface DailyCardPropType {
+ temperature: number;
+ weatherCode: number;
+ time: string;
}
\ No newline at end of file