61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { Icon } from '@iconify/react/dist/iconify.js';
|
|
import { Box, Center, Image, Overlay, 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 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>
|
|
);
|
|
}
|