130 lines
3.0 KiB
TypeScript
130 lines
3.0 KiB
TypeScript
import { Icon } from '@iconify/react/dist/iconify.js';
|
|
import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
|
|
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) {
|
|
const { isMobile } = useCommonHooks();
|
|
return (
|
|
<Stack gap={0} align='center' mx={isMobile ? '.25rem' : 0}>
|
|
<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, color: 'black' }}>
|
|
{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)`,
|
|
color: 'black',
|
|
}}
|
|
/>
|
|
<Icon
|
|
fontSize={28}
|
|
icon={'mdi:circle-outline'}
|
|
style={{ color: 'black' }}
|
|
/>
|
|
</Center>
|
|
<Text mt={-6} fz={12} style={{ color: 'black' }}>
|
|
{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)',
|
|
color: 'white',
|
|
}}
|
|
>
|
|
{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
|
|
</Text>
|
|
<Box
|
|
mt={4}
|
|
w={'100%'}
|
|
fz={14}
|
|
style={{
|
|
textAlign: 'center',
|
|
borderRadius: '4px',
|
|
background: 'rgba(0, 0, 0, 0.6)',
|
|
color: 'white',
|
|
}}
|
|
>
|
|
<Group gap={0} justify='center'>
|
|
<Icon
|
|
icon={'mdi:drop'}
|
|
style={{
|
|
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
|
|
}}
|
|
/>
|
|
{`${weather.probabilityOfPrecipitation.value}`}%
|
|
</Group>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|