Refactor

src/components/WeatherModal/SmallWeatherCard.tsx

@@ -0,0 +1,58 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Box, Center, Group, Image, Overlay, Stack, Text } from '@mantine/core';
+
+export default function SmallWeatherCard({ 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'}>
+				<Text mb={-8} p={0} fz={12}>
+					{weather.highTemp}°F/{weather.lowTemp}°F
+				</Text>
+				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
+					{weather.precipitation !== 'N/A' && (
+						<Group gap={0}>
+							<Icon icon={'mdi:weather-pouring'} height={32} width={32} />
+							<Text>{weather.precipitation} mm</Text>
+						</Group>
+					)}
+					{weather.precipitation === 'N/A' && (
+						<Icon icon={'mdi:white-balance-sunny'} height={32} width={32} />
+					)}
+					<Center>
+						<Icon
+							icon={'mdi:navigation'}
+							style={{
+								position: 'absolute',
+								transform: `rotate(${weather.windDirection}deg)`,
+							}}
+						/>
+						<Icon fontSize={32} icon={'mdi:circle-outline'} />
+					</Center>
+					<Text mt={-6} fz={12}>
+						{weather.windSpeed} mph
+					</Text>
+				</Stack>
+				<Stack gap={0} pos={'absolute'} bottom={8}>
+					<Text mt={-8} mb={-8} p={0} fz={36}>
+						{weather.temperature}°F
+					</Text>
+					<Text mt={-8} fz={12}>
+						Feels like: {weather.heatIndex}°F
+					</Text>
+					<Text mt={-6} fz={12}>
+						Humidity: {weather.humidity}%
+					</Text>
+				</Stack>
+			</Stack>
+		</Center>
+	);
+}