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

refactor: create metricCard component

Browse Source
This commit is contained in:
Jean Robertou 2021-08-06 20:29:03 +02:00
parent 9f16dea626
commit 5afa019645
2 changed files with 104 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pages/components/MetricCard.jsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import Image from "next/image";
const MetricCard = ({ title, iconSrc, metric, unit = "", styles }) => {
return (
<div className={styles.statsCard}>
<p>{title}</p>
<div className={styles.statsCardContent}>
<Image alt="weatherIcon" src={iconSrc} height="100px" width="100px" />
<div>
<h1>{metric}</h1>
<p>{unit}</p>
</div>
</div>
</div>
);
};
export default MetricCard;

231
pages/index.js
View File

@ -1,6 +1,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import styles from "../styles/Home.module.css"; import styles from "../styles/Home.module.css";
import Image from "next/image"; import Image from "next/image";
import MetricCard from "./components/MetricCard";
export default function Home() { export default function Home() {
const [input, setInput] = useState("Riga"); const [input, setInput] = useState("Riga");
@ -172,152 +173,90 @@ export default function Home() {
</div> </div>
<div className={styles.statsBox}> <div className={styles.statsBox}>
<div className={styles.statsCard}> <MetricCard
<p>Humidity</p> title={"Humidity"}
<div className={styles.statsCardContent}> iconSrc={"/icons/025-humidity.png"}
<Image metric={weatherData.main.humidity}
alt="weatherIcon" unit={"%"}
src={`/icons/025-humidity.png`} styles={styles}
height="100px" />
width="100px"
/> <MetricCard
<div> title={"Wind speed"}
<h1>{weatherData.main.humidity}</h1> iconSrc={"/icons/017-wind.png"}
<p>%</p> metric={
</div> systemUsed == "metric"
</div> ? weatherData.wind.speed
</div> : mpsToMph(weatherData.wind.speed)
<div className={styles.statsCard}> }
<p>Wind speed</p> unit={systemUsed == "metric" ? "m/s" : "m/h"}
<div className={styles.statsCardContent}> styles={styles}
<Image />
alt="weatherIcon"
src={`/icons/017-wind.png`} <MetricCard
height="100px" title={"Wind direction"}
width="100px" iconSrc={"/icons/014-compass.png"}
/> metric={degToCompass(weatherData.wind.deg)}
<div> styles={styles}
<h1> />
{systemUsed == "metric"
? weatherData.wind.speed <MetricCard
: mpsToMph(weatherData.wind.speed)} title={"Visibility"}
</h1> iconSrc={"/icons/binocular.png"}
<p>{systemUsed == "metric" ? "m/s" : "m/h"}</p> metric={
</div> systemUsed == "metric"
</div> ? (weatherData.visibility / 1000).toPrecision(2)
</div> : kmToM(weatherData.visibility / 1000)
<div className={styles.statsCard}> }
<p>Wind direction</p> unit={systemUsed == "metric" ? "km" : "miles"}
<div className={styles.statsCardContent}> styles={styles}
<Image />
alt="weatherIcon"
src={`/icons/014-compass.png`} <MetricCard
height="100px" title={"Sunrise"}
width="100px" iconSrc={"/icons/040-sunrise.png"}
/> metric={
<div> systemUsed == "metric"
<h1>{degToCompass(weatherData.wind.deg)}</h1> ? `${parseInt(
</div> convertTime(
</div> weatherData.sys.sunrise,
</div> weatherData.timezone
<div className={styles.statsCard}> )[0].split(":")[0]
<p>Visibility</p> )}:${
<div className={styles.statsCardContent}> convertTime(
<Image weatherData.sys.sunrise,
alt="weatherIcon" weatherData.timezone
src={`/icons/binocular.png`} )[0].split(":")[1]
height="100px" }`
width="100px" : timeToAMPM(
/> convertTime(
<div> weatherData.sys.sunrise,
<h1> weatherData.timezone
{systemUsed == "metric" )[0]
? (weatherData.visibility / 1000).toPrecision(2) )
: kmToM(weatherData.visibility / 1000)} }
</h1> styles={styles}
<p>{systemUsed == "metric" ? "km" : "miles"}</p> />
</div>
</div> <MetricCard
</div> title={"Sunset"}
<div className={styles.statsCard}> iconSrc={"/icons/041-sunset.png"}
<p>Sunrise</p> metric={
<div className={styles.statsCardContent}> systemUsed == "metric"
<Image ? convertTime(weatherData.sys.sunset, weatherData.timezone)[0]
alt="weatherIcon" : timeToAMPM(
src={`/icons/040-sunrise.png`} convertTime(weatherData.sys.sunset, weatherData.timezone)[0]
height="100px" )
width="100px" }
/> unit={
<div> systemUsed == "imperial"
<h1> ? isPM(
{systemUsed == "metric" convertTime(weatherData.sys.sunset, weatherData.timezone)[0]
? `${parseInt( )
convertTime( : ""
weatherData.sys.sunrise, }
weatherData.timezone styles={styles}
)[0].split(":")[0] />
)}:${
convertTime(
weatherData.sys.sunrise,
weatherData.timezone
)[0].split(":")[1]
}`
: timeToAMPM(
convertTime(
weatherData.sys.sunrise,
weatherData.timezone
)[0]
)}
</h1>
<p>
{systemUsed == "imperial"
? isPM(
convertTime(
weatherData.sys.sunrise,
weatherData.timezone
)[0]
)
: ""}
</p>
</div>
</div>
</div>
<div className={styles.statsCard}>
<p>Sunset</p>
<div className={styles.statsCardContent}>
<Image
alt="weatherIcon"
src={`/icons/041-sunset.png`}
height="100px"
width="100px"
/>
<div>
<h1>
{systemUsed == "metric"
? convertTime(
weatherData.sys.sunset,
weatherData.timezone
)[0]
: timeToAMPM(
convertTime(
weatherData.sys.sunset,
weatherData.timezone
)[0]
)}
</h1>
<p>
{systemUsed == "imperial"
? isPM(
convertTime(
weatherData.sys.sunset,
weatherData.timezone
)[0]
)
: ""}
</p>
</div>
</div>
</div>
</div> </div>
<div className={styles.switchBox}> <div className={styles.switchBox}>
<p <p