Kevin jayat

package.json

@@ -11,6 +11,7 @@
     "@chakra-ui/react": "^1.8.6",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
+    "@fontsource/be-vietnam-pro": "^4.5.2",
     "axios": "^0.26.1",
     "date-fns": "^2.28.0",
     "framer-motion": "^6.2.8",

src/App.jsx

@@ -10,7 +10,13 @@ const App = () => {
       minH="100vh"
       backgroundColor="gray.900"
       templateColumns="minmax(15em, 1fr) 3fr"
-    >
+      sx={{
+        '@media (max-width: 450px)': {
+          display: 'flex',
+          flexDirection: 'column'
+        },
+      }}
+      >
       <Sidebar />
       <MainContent>
         <Forecast />

src/components/Forecast.jsx

@@ -11,7 +11,7 @@ const Forecast = () => {
 
   return (
     <Grid templateColumns="repeat(auto-fit, minmax(120px, 1fr))" gap={4}>
-      {daysForecasts.slice(0, 4).map(forecast => (
+      {daysForecasts.slice(1, 6).map(forecast => (
         <ForecastCard key={forecast.id} forecast={forecast} />
       ))}
     </Grid>

src/components/ForecastCard.jsx

@@ -2,11 +2,12 @@ import { HStack, Text, Skeleton } from '@chakra-ui/react';
 import { round } from 'lodash';
 import Card from './Card';
 import WeatherIcon from './WeatherIcon';
+import { formatDate } from '../utils/index';
 
 const ForecastCard = ({ forecast }) => {
   return (
     <Card alignItems="center" shouldShowSkeleton isLoaded={!forecast.isLoading}>
-      <Text>{forecast?.applicableDate}</Text>
+      <Text>{formatDate(forecast?.applicableDate)}</Text>
       <WeatherIcon abbr={forecast?.weatherStateAbbr} />
       <HStack width="100%" justifyContent="space-between">
         <Text>{round(forecast?.maxTemp)} °C</Text>

src/components/Highlights.jsx

@@ -3,6 +3,7 @@ import { useWeather } from '../hooks';
 import HighlightCard from './HighlightCard';
 import { round } from 'lodash';
 import WindHeading from './Icons/WindHeading';
+import { angle } from '../utils/angle';
 
 const Highlights = () => {
   const { data, isLoading } = useWeather();
@@ -26,7 +27,7 @@ const Highlights = () => {
           }
           footer={
             <HStack>
-              <WindHeading />
+              <WindHeading angle={angle(today?.windDirectionCompass)} />
               <Text color="gray.500">{today?.windDirectionCompass}</Text>
             </HStack>
           }

src/components/Icons/WindHeading.jsx

@@ -1,7 +1,10 @@
 import { memo } from 'react';
 
+
 const WindHeading = props => (
+
   <svg
+    transform={`rotate (${props.angle})`}
     width="1em"
     height="1em"
     viewBox="0 0 24 24"
@@ -18,6 +21,7 @@ const WindHeading = props => (
       strokeLinejoin="round"
     />
   </svg>
+
 );
 
 export default memo(WindHeading);

src/components/Sidebar.jsx

@@ -1,7 +1,13 @@
-import { Box, Heading, Stack, Text } from '@chakra-ui/react';
+import { Box, Heading, Stack, Text, Select } from '@chakra-ui/react';
 import WeatherIcon from './WeatherIcon';
+import { useWeather } from '../hooks';
+import { round } from 'lodash';
+import { formatDate } from '../utils/index';
 
 const Sidebar = () => {
+  const { data } = useWeather();
+  const today = data?.data?.consolidatedWeather?.[0];
+
   return (
     <Box backgroundColor="gray.800" color="gray.500">
       <Stack
@@ -13,19 +19,24 @@ const Sidebar = () => {
       >
         <span /> {/* Intentionnaly left blank */}
         <Stack alignItems="center" spacing={0}>
-          <WeatherIcon width="100%" />
+          <Select placeholder="Choose your city" variant="flushed">
+            <option value="option1">Lille</option>
+            <option value="option2">Lyon</option>
+            <option value="option3">Bordeaux</option>
+          </Select>
+          <WeatherIcon width="100%" abbr={today?.weatherStateAbbr} />
           <Heading as="h1" fontSize="8xl" color="white">
-            20
+            {Boolean(today?.maxTemp) ? round(today?.maxTemp) : undefined}
             <Text fontSize="4xl" display="inline" color="gray.500">
               °C
             </Text>
           </Heading>
           <Text fontSize="4xl" display="inline">
-            Sunny
+            {today?.weatherStateName}
           </Text>
         </Stack>
         <Stack alignItems="center" spacing={0}>
-          <Text>Today • Sun 13 Mar</Text>
+          <Text>Today • {formatDate(today?.applicableDate)}</Text>
           <Text>Lille</Text>
         </Stack>
       </Stack>

src/main.jsx

@@ -5,6 +5,8 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import AppProvider from './providers/AppProvider';
 import { theme } from './ui';
+import '@fontsource/be-vietnam-pro'
+
 
 const queryClient = new QueryClient();
 

src/ui/theme.js

@@ -16,6 +16,11 @@ const theme = extendTheme({
     },
   },
 
+  fonts: {
+    heading: 'Be Vietnam Pro, sans-serif',
+    body: 'Be Vietnam Pro, sans-serif',
+  },
+
   components: {
     Progress: {
       baseStyle: {

src/utils/angle.js

@@ -0,0 +1,41 @@
+ //  ternary operators to determine the angle of the compass
+
+export function angle(windDirection) {
+  try {
+    return windDirection == 'N' // direction 
+      ? 0 // degree
+      : windDirection == 'NNE'
+      ? 30
+      : windDirection == 'NE'
+      ? 50
+      : windDirection == 'ENE'
+      ? 70
+      : windDirection == 'E'
+      ? 90
+      : windDirection == 'ESE'
+      ? 120
+      : windDirection == 'SE'
+      ? 140
+      : windDirection == 'SSE'
+      ? 160
+      : windDirection == 'S'
+      ? 180
+      : windDirection == 'SSW'
+      ? 210
+      : windDirection == 'SW'
+      ? 230
+      : windDirection == 'WSW'
+      ? 250
+      : windDirection == 'W'
+      ? 270
+      : windDirection == 'WNW'
+      ? 300
+      : windDirection == 'NW'
+      ? 320
+      : windDirection == 'NNW'
+      ? 340
+      : 0; // goes to 0° if the value is undefined
+  } catch (err) {
+    return '';
+  } 
+}

src/utils/index.js

@@ -1 +1,9 @@
-export const formatDate = () => {};
+import { format } from 'date-fns';
+
+export function formatDate(date) {
+  try {
+    return format(new Date(date), 'eee d MMM');
+  } catch (err) {
+    return '';
+  } // this date formatting exemple : Fri 18 Mar
+}