Updated weather cards

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>
 	);