Updates to details

src/components/WeatherModal/ExtendedForecastDetails.tsx

@@ -1,18 +1,26 @@
 import { ActionIcon, Box, Card, Group, Stack, Text } from '@mantine/core';
-import { FaArrowDown, FaArrowUp, FaLocationArrow, FaSun, FaWind } from 'react-icons/fa';
-import { FaX } from 'react-icons/fa6';
+import { useCommonHooks } from 'hooks';
+import { FaLocationArrow, FaSun, FaWind } from 'react-icons/fa';
+import { FaDroplet, FaX } from 'react-icons/fa6';
 import { WiRain, WiSunrise, WiSunset } from 'react-icons/wi';
+import { textClasses } from 'styles';
 import { WeatherCodes } from 'types';
 import WeatherFeaturePill from './WeatherFeaturePill';
+import WeatherGraphs from './WeatherGraphs';
 import WeatherIcon from './WeatherIcon';
 
 export default function ExtendedForecastDetails({
 	selectedDay,
 	setSelectedDay,
+	selectedHourly,
+	setSelectedHourly,
 }: {
 	selectedDay: any;
 	setSelectedDay: (day: any) => void;
+	selectedHourly: any;
+	setSelectedHourly: (hourly: any) => void;
 }) {
+	const { isMobile } = useCommonHooks();
 	return (
 		<Card
 			h={'100%'}
@@ -24,7 +32,8 @@ export default function ExtendedForecastDetails({
 				borderRadius: '8px',
 				overflow: 'visible',
 				cursor: 'default',
-				boxShadow: '15px 15px 3px var(--mantine-color-border-0)',
+				boxShadow:
+					'15px 15px 2px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%)',
 			}}
 			onClick={(e) => {
 				e.stopPropagation();
@@ -41,6 +50,7 @@ export default function ExtendedForecastDetails({
 				}}
 				onClick={() => {
 					setSelectedDay(undefined);
+					setSelectedHourly(undefined);
 				}}
 			>
 				<FaX />
@@ -64,10 +74,96 @@ export default function ExtendedForecastDetails({
 				</Text>
 			</Group>
 			<Stack align='center' p={16}>
-				<WeatherIcon size={'xl'} code={selectedDay.weatherCode} />
-				<Text fz={'1rem'} fw={600} mt={'-32px'}>
-					{WeatherCodes[Number(selectedDay.weatherCode)]}
-				</Text>
+				<Group>
+					<Stack
+						gap={0}
+						style={{
+							overflow: 'hidden',
+							backgroundColor: 'var(--mantine-color-background-0)',
+							border: 'thin solid var(--mantine-color-primary-0)',
+							zIndex: 1,
+							paddingLeft: '2.25rem',
+							paddingRight: '2.25rem',
+							borderRadius: '100%',
+							aspectRatio: 1,
+						}}
+						align='center'
+						justify='center'
+					>
+						<Box m={0} p={0}>
+							<WeatherFeaturePill
+								leftSide={<Text>Feels like</Text>}
+								rightSide={
+									<Text>
+										{selectedDay.apparentTemperatureMax?.toFixed(0) ??
+											selectedDay.temperatureMax?.toFixed(0)}
+										°<sup>F</sup>
+									</Text>
+								}
+								highlight='right'
+							/>
+						</Box>
+						<Group pos={'relative'}>
+							<Text fz={isMobile ? '5rem' : '7rem'} fw={400} style={{ lineHeight: 1 }}>
+								{selectedDay.temperatureMax?.toFixed(0)}
+								<sup style={{ fontSize: '3rem' }}>°F</sup>
+							</Text>
+
+							<Text style={{ lineHeight: 1 }} pos={'absolute'} bottom={20} right={0}>
+								/ {selectedDay.temperatureMin?.toFixed(0)}°<sup>F</sup>
+							</Text>
+							<Box
+								style={{
+									position: 'absolute',
+									backgroundColor:
+										'color-mix(in srgb, var(--mantine-color-accent-0), transparent 80%)',
+									height: '250%',
+									width: '80%',
+									bottom: -96,
+									right: -60,
+									transform: 'skewX(-25deg)',
+									zIndex: -1,
+									borderRadius: '2px',
+									backdropFilter: 'brightness(0.5)',
+									lineHeight: 1,
+								}}
+							/>
+						</Group>
+						<Group
+							justify={
+								WeatherCodes[Number(selectedDay.weatherCode)].length > 25
+									? 'flex-start'
+									: 'center'
+							}
+							style={{
+								width: '100%',
+								maxWidth: '180px',
+								whiteSpace: 'nowrap',
+								overflow: 'hidden',
+								boxSizing: 'border-box',
+								position: 'relative',
+							}}
+						>
+							<Text
+								className={
+									WeatherCodes[Number(selectedDay.weatherCode)].length > 25
+										? textClasses.autoScrollText
+										: undefined
+								}
+								classNames={textClasses}
+								style={{ lineHeight: 1 }}
+							>
+								{selectedDay.temperature_2m?.toFixed(0) === '69'
+									? 'Nice'
+									: WeatherCodes[Number(selectedDay.weatherCode)]}
+							</Text>
+						</Group>
+					</Stack>
+					<Stack>
+						<WeatherIcon size={'xl'} code={selectedDay.weatherCode} />
+					</Stack>
+				</Group>
+
 				<Group>
 					<Group justify='space-between'>
 						<Stack gap={4}>
@@ -173,76 +269,27 @@ export default function ExtendedForecastDetails({
 						</Stack>
 					</Group>
 				</Group>
-				<Group w={'100%'} gap={4} justify='space-between'>
-					<Box w={'48%'}>
-						<WeatherFeaturePill
-							leftSide={
-								<Group gap={2}>
-									<FaArrowUp size={16} />
-									<Text>High Temp</Text>
-								</Group>
-							}
-							rightSide={
-								<Text>
-									{selectedDay.temperatureMax.toFixed(0)}°<sup>F</sup>
-								</Text>
-							}
-							highlight='right'
-						/>
-					</Box>
-					<Box w={'48%'}>
-						<WeatherFeaturePill
-							leftSide={
-								<Group gap={2}>
-									<FaArrowDown size={16} />
-									<Text>Low Temp</Text>
-								</Group>
-							}
-							rightSide={
-								<Text>
-									{selectedDay.temperatureMin.toFixed(0)}°<sup>F</sup>
-								</Text>
-							}
-							highlight='right'
-						/>
-					</Box>
-				</Group>
-				<Group w={'100%'} gap={4} justify='space-between'>
-					<Box w={'48%'}>
-						<WeatherFeaturePill
-							leftSide={
-								<Group gap={2}>
-									<FaArrowUp size={16} />
-									<Text>Feels Like High</Text>
-								</Group>
-							}
-							rightSide={
-								<Text>
-									{selectedDay.apparentTemperatureMax.toFixed(0)}°<sup>F</sup>
-								</Text>
-							}
-							highlight='right'
-						/>
-					</Box>
-					<Box w={'48%'}>
-						<WeatherFeaturePill
-							leftSide={
-								<Group gap={2}>
-									<FaArrowDown size={16} />
-									<Text>Feels Like Temp</Text>
-								</Group>
-							}
-							rightSide={
-								<Text>
-									{selectedDay.apparentTemperatureMin.toFixed(0)}°<sup>F</sup>
-								</Text>
-							}
-							highlight='right'
-						/>
-					</Box>
-				</Group>
-				<Group w={'100%'} gap={4} justify='space-between'>
-					<Box w={'48%'}>
+				<Group justify='space-between'>
+					<Stack align='center' justify='center' gap={0}>
+						<Box
+							style={{
+								border: '2px solid var(--mantine-color-primary-0)',
+								borderRadius: '100%',
+								aspectRatio: 1,
+								width: 'fit-content',
+								padding: '.75rem',
+								display: 'flex',
+								backgroundColor: 'var(--mantine-color-background-0)',
+							}}
+						>
+							<FaDroplet
+								style={{
+									color: 'var(--mantine-color-accent-0)',
+								}}
+							/>
+						</Box>
+					</Stack>
+					<Stack gap={4}>
 						<WeatherFeaturePill
 							leftSide={
 								<Group gap={2}>
@@ -253,8 +300,6 @@ export default function ExtendedForecastDetails({
 							rightSide={<Text>{selectedDay.precipitationProbability}%</Text>}
 							highlight='right'
 						/>
-					</Box>
-					<Box w={'48%'}>
 						<WeatherFeaturePill
 							leftSide={
 								<Group gap={2}>
@@ -265,8 +310,9 @@ export default function ExtendedForecastDetails({
 							rightSide={<Text>{selectedDay.precipitationSum.toFixed(2)} in.</Text>}
 							highlight='right'
 						/>
-					</Box>
+					</Stack>
 				</Group>
+				<WeatherGraphs hourly={selectedHourly} formatted />
 			</Stack>
 		</Card>
 	);