flexbox hell

app/page.tsx

@@ -21,8 +21,8 @@ export default function Home() {
   };
 
   return (
-    <main className='flex'>
-      <div className='mx-auto'>
+    <main>
+      <div className='mx-auto max-w-3xl'>
         <LocationContext.Provider value={contextValue}>
           <LocationSearch />
           <WeatherNow />

components/HourlyCard/HourlyCard.tsx

@@ -3,12 +3,12 @@ import WeatherIcon from "./WeatherIcon"
 import HourlyTemp from "./HourlyTemp"
 
 export default function HourlyCard(props: HourlyCardPropType) {
-    const weatherCode = props.weather.weather_code[props.timeIndex]
-    const temperature = props.weather.apparent_temperature[props.timeIndex]
+    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}/>
             <HourlyTemp temperature={temperature} />
-        </>
+        </div>
     )
 };

components/HourlyCard/HourlyTemp.tsx

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

components/HourlyCard/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 (
-    <>
-        <Image className="h-1/3 mx-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
-    </>
+    <div className="p-2">
+        <Image src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
+    </div>
 )
 };

components/WeatherNow.tsx

@@ -2,17 +2,19 @@
 
 import { getHourlyForecast } from "@/app/actions";
 import Temperature from "./Temperature";
-import { HourlyForecast, WeatherContextType } from "@/types/types";
+import { HourlyCardPropType, HourlyForecast, WeatherContextType } from "@/types/types";
 import { createContext, useContext, useEffect, useState } from "react";
 import { defaultHourlyForecast } from "@/app/defaultState";
 import { LocationContext } from "@/app/page";
 import WeatherHero from "./WeatherHero";
+import HourlyCard from "./HourlyCard/HourlyCard";
 
 export const WeatherContext = createContext<WeatherContextType>({
   weather: defaultHourlyForecast,
   setWeather: () => {}, // Default function, does nothing
 });
 
+
 export default function WeatherNow() {
   const { geoLocation } = useContext(LocationContext);
   const [weather, setWeather] = useState<HourlyForecast>(defaultHourlyForecast);
@@ -20,6 +22,7 @@ export default function WeatherNow() {
     weather,
     setWeather,
   };
+
   useEffect(() => {
     let mounted = true;
     getHourlyForecast(geoLocation).then((data) => {
@@ -39,6 +42,16 @@ export default function WeatherNow() {
       <WeatherContext.Provider value={contextValue}>
         <WeatherHero />
         <Temperature />
+        <div className="flex flex-wrap h-full">
+          {weather.hourly && weather.hourly.apparent_temperature.map((temp, index) => (
+            index < 12 && // Ensure we only render the first 12 hours
+            <HourlyCard
+              key={index}
+              temperature={temp}
+              weatherCode={weather.hourly.weather_code[index]}
+            />
+          ))}
+        </div>
       </WeatherContext.Provider>
     </>
   );

types/types.ts

@@ -215,6 +215,6 @@ export interface WeatherContextType {
 }
 
 export interface HourlyCardPropType {
-  weather: HourlyWeather;
-  timeIndex: number;
+  temperature: number;
+  weatherCode: number;
 }