Refactor

src/components/WeatherModal/HourlyCard.tsx

@@ -0,0 +1,120 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
+
+export enum WindDirection {
+	N = 0,
+	NE = 45,
+	E = 90,
+	SE = 135,
+	S = 180,
+	SW = 225,
+	W = 270,
+	NW = 315,
+}
+
+export default function HourlyCard({ weather }: any) {
+	return (
+		<Stack gap={0} align='center'>
+			<Card
+				style={{
+					height: '8rem',
+					width: '4rem',
+					backgroundColor: 'var(--color-text-pri)',
+					background: 'rgba(255, 255, 255, 0.6)',
+					padding: 0,
+					margin: 0,
+				}}
+			>
+				<Stack gap={0} h={'100%'} w={'100%'} align='center'>
+					<Stack gap={0} align='center'>
+						<Text mb={-6} fz={12} style={{ zIndex: 2 }}>
+							{new Date(weather.startTime).toLocaleString('en-US', {
+								weekday: 'short',
+								month: 'numeric',
+								day: 'numeric',
+							})}
+						</Text>
+						<Text fz={12} style={{ zIndex: 2 }}>
+							{new Date(weather.startTime).toLocaleTimeString('en-US', {
+								hour: 'numeric',
+								minute: 'numeric',
+							})}
+						</Text>
+						<Stack gap={0} align='center'>
+							<Box
+								style={{
+									position: 'absolute',
+									width: '56px',
+									height: '56px',
+									backgroundColor: 'transparent',
+									boxShadow:
+										'inset 0px 0px 10px 3px rgba(255, 255, 255, 1), 0px 0px 10px 0px rgba(255, 255, 255, .6)',
+									zIndex: 1,
+									borderRadius: '100%',
+									borderStyle: 'none',
+									border: '0px solid',
+								}}
+							/>
+							<Image
+								src={weather.icon}
+								style={{
+									zIndex: 0,
+									borderRadius: '100%',
+									border: '0px solid',
+									borderStyle: 'none',
+								}}
+							/>
+						</Stack>
+					</Stack>
+					<Stack gap={0} align='center' style={{ zIndex: 1 }}>
+						<Center>
+							<Icon
+								icon={'mdi:navigation'}
+								style={{
+									position: 'absolute',
+									transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
+								}}
+							/>
+							<Icon fontSize={28} icon={'mdi:circle-outline'} />
+						</Center>
+						<Text mt={-6} fz={12}>
+							{weather.windSpeed}
+						</Text>
+					</Stack>
+				</Stack>
+			</Card>
+			<Text
+				mt={4}
+				w={'100%'}
+				fz={14}
+				style={{
+					textAlign: 'center',
+					borderRadius: '4px',
+					background: 'rgba(0, 0, 0, 0.6)',
+				}}
+			>
+				{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}`}%
+				</Group>
+			</Text>
+		</Stack>
+	);
+}