Mathis/forecast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit weatherdata

Browse Source
This commit is contained in:
madarsbiss 2021-09-22 19:25:53 +03:00
parent 2af4c0c5e2
commit 686701a6b9
2 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/MetricsBox.js
View File

@ -9,48 +9,60 @@ import MetricCard from "./MetricsCard";
import styles from "./MetricsBox.module.css";
const MetricsBox = ({ data, systemUsed }) => {
const MetricsBox = ({ weatherData, systemUsed }) => {
return (
<div className={styles.wrapper}>
<MetricCard
title={"Humidity"}
iconSrc={"/icons/humidity.png"}
metric={data.main.humidity}
metric={weatherData.main.humidity}
unit={"%"}
/>
<MetricCard
title={"Wind speed"}
iconSrc={"/icons/wind.png"}
metric={getWindSpeed(systemUsed, data.wind.speed)}
metric={getWindSpeed(systemUsed, weatherData.wind.speed)}
unit={systemUsed == "metric" ? "m/s" : "m/h"}
/>
<MetricCard
title={"Wind direction"}
iconSrc={"/icons/compass.png"}
metric={degToCompass(data.wind.deg)}
metric={degToCompass(weatherData.wind.deg)}
/>
<MetricCard
title={"Visibility"}
iconSrc={"/icons/binocular.png"}
metric={getVisibility(systemUsed, data.visibility)}
metric={getVisibility(systemUsed, weatherData.visibility)}
unit={systemUsed == "metric" ? "km" : "miles"}
/>
<MetricCard
title={"Sunrise"}
iconSrc={"/icons/sunrise.png"}
metric={getTime(systemUsed, data.sys.sunrise, data.timezone)}
unit={getAMPM(systemUsed, data.sys.sunrise, data.timezone)}
metric={getTime(
systemUsed,
weatherData.sys.sunrise,
weatherData.timezone
)}
unit={getAMPM(
systemUsed,
weatherData.sys.sunrise,
weatherData.timezone
)}
/>
<MetricCard
title={"Sunset"}
iconSrc={"/icons/sunset.png"}
metric={getTime(systemUsed, data.sys.sunset, data.timezone)}
unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)}
metric={getTime(
systemUsed,
weatherData.sys.sunset,
weatherData.timezone
)}
unit={getAMPM(systemUsed, weatherData.sys.sunset, weatherData.timezone)}
/>
</div>
);

3
pages/index.js
View File

@ -6,7 +6,6 @@ import Header from "../components/Header";
import DateAndTime from "../components/DateAndTime";
import Search from "../components/Search";
import MetricsBox from "../components/MetricsBox";
import MetricsCard from "../components/MetricsCard";
import UnitSwitch from "../components/UnitSwitch";
import LoadingScreen from "../components/LoadingScreen";
import ErrorScreen from "../components/ErrorScreen";
@ -65,7 +64,7 @@ const App = () => {
}}
/>
</Header>
<MetricsBox data={weatherData} systemUsed={systemUsed} />
<MetricsBox weatherData={weatherData} systemUsed={systemUsed} />
<UnitSwitch onClick={changeSystem} systemUsed={systemUsed} />
</ContentBox>
</div>