Weather API integration

src/pages/homepage/components/SmallOutlookCard.tsx

@@ -0,0 +1,60 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Box, Center, Image, Overlay, Stack, Text } from '@mantine/core';
+
+enum WindDirection {
+	N = 0,
+	NE = 45,
+	E = 90,
+	SE = 135,
+	S = 180,
+	SW = 225,
+	W = 270,
+	NW = 315,
+}
+
+export default function SmallOutlookCard({ weather }: any) {
+	return (
+		<Center display={'flex'}>
+			<Box pos={'relative'} style={{ zIndex: -1 }}>
+				<Image radius={'lg'} src={weather.icon} />
+				<Overlay
+					color='black'
+					gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
+					zIndex={0}
+					radius={'lg'}
+				/>
+			</Box>
+			<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
+				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
+					<Center>
+						<Icon
+							icon={'mdi:navigation'}
+							style={{
+								position: 'absolute',
+								transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
+							}}
+						/>
+						<Icon fontSize={32} icon={'mdi:circle-outline'} />
+					</Center>
+					<Text mt={-6} fz={12}>
+						{weather.windSpeed}
+					</Text>
+				</Stack>
+				<Stack gap={0} pos={'absolute'} bottom={8}>
+					<Text mt={-4} mb={-4} fz={14}>
+						Precip:
+					</Text>
+					<Text mt={-8} mb={-8} p={0} fz={24}>
+						{weather.precipitation}%
+					</Text>
+					<Text mt={-4} mb={-4} fz={14}>
+						{weather.isDayTime ? 'High of:' : 'Low of:'}
+					</Text>
+					<Text mt={-8} mb={-8} p={0} fz={36}>
+						{weather.temperature}°F
+					</Text>
+				</Stack>
+			</Stack>
+		</Center>
+	);
+}