Building weather forecast component

Author: zntb

src/App.js

@@ -4,6 +4,7 @@ import './App.css';
 import CurrentWeather from './components/current-weather/CurrentWeather';
 import Search from './components/search/Search';
 import { WEATHER_API_URL, WEATHER_API_KEY } from './api';
+import Forecast from './components/forecast/Forecast';
 
 function App() {
   const [currentWeather, setCurrrentWeather] = useState(null);
@@ -39,6 +40,7 @@ function App() {
     <div className="container">
       <Search onSearchChange={handleOnSearchChange} />
       {currentWeather && <CurrentWeather data={currentWeather} />}
+      {forecast && <Forecast data={forecast} />}
     </div>
   );
 }

src/components/forecast/Forecast.js

@@ -0,0 +1,86 @@
+import './forecast.css';
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemHeading,
+  AccordionItemPanel,
+} from 'react-accessible-accordion';
+
+const WEEK_DAYS = [
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+  'Sunday',
+];
+
+const Forecast = ({ data }) => {
+  const dayInAWeek = new Date().getDay();
+  const forecastDays = WEEK_DAYS.slice(dayInAWeek, WEEK_DAYS.length).concat(
+    WEEK_DAYS.slice(0, dayInAWeek)
+  );
+
+  return (
+    <>
+      <label className="title">Daily</label>
+      <Accordion allowZeroExpanded>
+        {data.list.splice(0, 7).map((item, idx) => (
+          <AccordionItem key={idx}>
+            <AccordionItemHeading>
+              <AccordionItemButton>
+                <div className="daily-item">
+                  <img
+                    className="icon-small"
+                    src={`icons/${item.weather[0].icon}.png`}
+                    alt="weather"
+                  />
+                  <label className="day">{forecastDays[idx]}</label>
+                  <label className="description">
+                    {item.weather[0].description}
+                  </label>
+                  <label className="min-max">
+                    {Math.round(item.main.temp_min)}°C /{' '}
+                    {Math.round(item.main.temp_max)}°C
+                  </label>
+                </div>
+              </AccordionItemButton>
+            </AccordionItemHeading>
+            <AccordionItemPanel>
+              <div className="daily-details-grid">
+                <div className="daily-details-grid-item">
+                  <label>Pressure</label>
+                  <label>{item.main.pressure} hPa</label>
+                </div>
+                <div className="daily-details-grid-item">
+                  <label>Humidity</label>
+                  <label>{item.main.humidity}%</label>
+                </div>
+                <div className="daily-details-grid-item">
+                  <label>Clouds</label>
+                  <label>{item.clouds.all}%</label>
+                </div>
+                <div className="daily-details-grid-item">
+                  <label>Wind speed:</label>
+                  <label>{item.wind.speed} m/s</label>
+                </div>
+                <div className="daily-details-grid-item">
+                  <label>Sea level:</label>
+                  <label>{item.main.sea_level}m</label>
+                </div>
+                <div className="daily-details-grid-item">
+                  <label>Feels like:</label>
+                  <label>{Math.round(item.main.feels_like)}°C</label>
+                </div>
+              </div>
+            </AccordionItemPanel>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </>
+  );
+};
+export default Forecast;

src/components/forecast/forecast.css

@@ -0,0 +1,66 @@
+.title {
+  font-size: 23px;
+  font-weight: 700;
+}
+
+.daily-item {
+  background-color: #f5f5f5;
+  border-radius: 15px;
+  height: 40px;
+  margin: 5px;
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  padding: 5px 20px;
+}
+
+.icon-small {
+  width: 40px;
+}
+
+.daily-item .day {
+  cursor: inherit;
+  color: #212121;
+  flex: 1 1;
+  font-weight: 600;
+  margin-left: 15px;
+}
+
+.description {
+  cursor: inherit;
+  flex: 1 1;
+  margin-right: 15px;
+  text-align: right;
+}
+
+.min-max {
+  color: #757575;
+}
+
+.daily-details-grid {
+  grid-row-gap: 0;
+  grid-column-gap: 15px;
+  -webkit-column-gap: 15px;
+  column-gap: 15px;
+  display: grid;
+  flex: 1 1;
+  grid-template-columns: auto auto;
+  padding: 5px 15px;
+  row-gap: 0;
+}
+
+.daily-details-grid-item {
+  align-items: center;
+  display: flex;
+  height: 30px;
+  justify-content: space-between;
+}
+
+.daily-details-grid-item label:first-child {
+  color: #757575;
+}
+
+.daily-details-grid-item label:last-child {
+  color: #212121;
+}