Updated weather cards

src/pages/homepage/Homepage.tsx

@@ -104,8 +104,9 @@ export default function Homepage({ theme }: any) {
 				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,
+				heatIndex: Math.round(weather.features[0].properties.heatIndex.value !== null ?
+					(weather.features[0].properties.heatIndex.value * 9) / 5 + 32
+					: (weather.features[0].properties.temperature.value * 9) / 5 + 32,
 				),
 				windSpeed: Math.round(weather.features[0].properties.windSpeed.value / 1.60934),
 				windDirection: weather.features[0].properties.windDirection.value,

src/pages/homepage/components/HourlyCard.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
-import { Box, Card, Center, Image, Stack, Text } from '@mantine/core';
+import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
 
 export enum WindDirection {
 	N = 0,
@@ -12,7 +12,7 @@ export enum WindDirection {
 	NW = 315,
 }
 
-export default function HourlyCard({ weather }: any) {
+export default function HourlyCard({ weather }: any) {;
 	return (
 		<Stack gap={0} align='center'>
 			<Card
@@ -86,14 +86,32 @@ export default function HourlyCard({ weather }: any) {
 			<Text
 				mt={4}
 				w={'100%'}
-				fz={24}
+				fz={14}
 				style={{
 					textAlign: 'center',
 					borderRadius: '4px',
 					background: 'rgba(0, 0, 0, 0.6)',
 				}}
 			>
-				{weather.temperature}°{weather.temperatureUnit}
+				{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
+			</Text>
+			<Text
+				mt={4}
+				w={'100%'}
+				fz={14}
+				style={{
+					textAlign: 'center',
+					borderRadius: '4px',
+					background: 'rgba(0, 0, 0, 0.6)',
+				}}
+			>
+				<Group gap={0} justify='center'><Icon
+					icon={'mdi:drop'}
+					style={{
+						transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
+					}}
+				/>
+				{`${weather.probabilityOfPrecipitation.value*10}`}%</Group>
 			</Text>
 		</Stack>
 	);