70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
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
|
|
w={'134px'}
|
|
h={'134px'}
|
|
radius={'lg'}
|
|
src={weather.icon === '' ? undefined : 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} style={{ color: 'white' }}>
|
|
{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 color={'white'} icon={'mdi:weather-pouring'} height={32} width={32} />
|
|
<Text style={{ color: 'white' }}>{weather.precipitation} mm</Text>
|
|
</Group>
|
|
)}
|
|
{weather.precipitation === 'N/A' && (
|
|
<Icon
|
|
icon={'mdi:white-balance-sunny'}
|
|
height={32}
|
|
width={32}
|
|
color={'white'}
|
|
/>
|
|
)}
|
|
<Center>
|
|
<Icon
|
|
icon={'mdi:navigation'}
|
|
color='white'
|
|
style={{
|
|
position: 'absolute',
|
|
transform: `rotate(${weather.windDirection}deg)`,
|
|
}}
|
|
/>
|
|
<Icon fontSize={32} icon={'mdi:circle-outline'} color='white' />
|
|
</Center>
|
|
<Text mt={-6} fz={12} style={{ color: 'white' }}>
|
|
{weather.windSpeed} mph
|
|
</Text>
|
|
</Stack>
|
|
<Stack gap={0} pos={'absolute'} bottom={8}>
|
|
<Text mt={-8} mb={-8} p={0} fz={36} style={{ color: 'white' }}>
|
|
{weather.temperature}°F
|
|
</Text>
|
|
<Text mt={-8} fz={12} style={{ color: 'white' }}>
|
|
Feels like: {weather.heatIndex}°F
|
|
</Text>
|
|
<Text mt={-6} fz={12} style={{ color: 'white' }}>
|
|
Humidity: {weather.humidity}%
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Center>
|
|
);
|
|
}
|