Added weather info to header

src/pages/homepage/components/Header.tsx

@@ -1,10 +1,23 @@
-import { Stack, Text } from '@mantine/core';
+import { Group, Stack, Text } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { textClasses } from '../../../styles';
+import { useWeatherAPI } from '../../../hooks';
 
 function Header({ greet, date, isMobile }: any) {
 	const [time, setTime] = useState(new Date());
-
+	const { data: weather } = useWeatherAPI({ endpoint: 'current' });
+	const { data: basicWeather } = useWeatherAPI({ endpoint: 'baseline' });
+	const [current, setCurrent] = useState<CurrentWeather>({
+		icon: '',
+		temperature: 0,
+		highTemp: 0,
+		lowTemp: 0,
+		precipitation: 'N/A',
+		humidity: 0,
+		heatIndex: 0,
+		windSpeed: 0,
+		windDirection: 0,
+	});
 	function fixDigits(k: any) {
 		if (k < 10) {
 			return `0${k}`;
@@ -19,6 +32,31 @@ function Header({ greet, date, isMobile }: any) {
 		}, 1000);
 	}, []);
 
+	useEffect(() => {
+		if (weather && basicWeather) {
+			setCurrent({
+				icon: weather.features[0].properties.icon.replace('medium', 'large'),
+				temperature: Math.round(
+					(weather.features[0].properties.temperature.value * 9) / 5 + 32,
+				),
+				highTemp: Math.round(
+					(basicWeather.properties.maxTemperature.values[0].value * 9) / 5 + 32,
+				),
+				lowTemp: Math.round(
+					(basicWeather.properties.minTemperature.values[0].value * 9) / 5 + 32,
+				),
+				precipitation:
+					weather.features[0].properties.precipitationLastHour.value || 'N/A',
+				humidity: Math.round(weather.features[0].properties.relativeHumidity.value),
+				heatIndex: Math.round(
+					(weather.features[0].properties.heatIndex.value * 9) / 5 + 32,
+				),
+				windSpeed: Math.round(weather.features[0].properties.windSpeed.value / 1.60934),
+				windDirection: weather.features[0].properties.windDirection.value,
+			});
+		}
+	}, [weather, basicWeather]);
+
 	return (
 		<Stack
 			style={{
@@ -61,23 +99,47 @@ function Header({ greet, date, isMobile }: any) {
 				>
 					{date}
 				</Text>
-				<Text
-					component='h2'
-					className={textClasses.dateTime}
-					classNames={textClasses}
+				<Group
 					style={{
-						justifyContent: 'right',
-						display: 'grid',
+						justifyContent: isMobile ? 'right' : 'space-between',
+						width: '100%',
+						gap: 0,
 					}}
 				>	
-					{`${
-						time.getHours() === 0
-							? 12
-							: time.getHours() > 12
-								? time.getHours() - 12
-								: time.getHours()
-					}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
-				</Text>
+					{!isMobile && (
+						<Group gap={0} align='end' style={{ display: 'flex' }}>
+						<Text
+							component='h2'
+							mr={4}
+							className={textClasses.dateTime}
+							classNames={textClasses}
+						>
+							{current.temperature}°F
+						</Text>
+						<Text
+							mb={6}
+							className={textClasses.dateTime}
+							classNames={textClasses}
+							fz={14}
+						>
+							{current.highTemp}°F/{current.lowTemp}°F
+						</Text>
+					</Group>
+					)}
+					<Text
+						component='h2'
+						className={textClasses.dateTime}
+						classNames={textClasses}
+					>
+						{`${
+							time.getHours() === 0
+								? 12
+								: time.getHours() > 12
+									? time.getHours() - 12
+									: time.getHours()
+						}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
+					</Text>
+				</Group>
 			</Stack>
 		</Stack>
 	);

src/pages/homepage/components/Search.tsx

@@ -8,28 +8,6 @@ import { modalClasses, textInputClasses } from '../../../styles';
 import SmallWeatherCard from './SmallWeatherCard';
 import SmallOutlookCard from './SmallOutlookCard';
 
-interface CurrentWeather{
-	icon: string;
-	temperature: number;
-	highTemp: number;
-	lowTemp: number;
-	precipitation: string;
-	humidity: number;
-	heatIndex: number;
-	windSpeed: number;
-	windDirection: number;
-}
-
-interface OutlookWeather{
-	name: string;
-	icon: string;
-	isDayTime: boolean;
-	temperature: number;
-	precipitation: number;
-	windSpeed: string;
-	windDirection: string;
-}
-
 export default function Search() {
 	const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
 	const { data: basicWeather } = useWeatherAPI({ endpoint: 'baseline' });

src/pages/homepage/types/weather.d.ts

@@ -0,0 +1,21 @@
+interface CurrentWeather{
+	icon: string;
+	temperature: number;
+	highTemp: number;
+	lowTemp: number;
+	precipitation: string;
+	humidity: number;
+	heatIndex: number;
+	windSpeed: number;
+	windDirection: number;
+}
+
+interface OutlookWeather{
+	name: string;
+	icon: string;
+	isDayTime: boolean;
+	temperature: number;
+	precipitation: number;
+	windSpeed: string;
+	windDirection: string;
+}