add cards
This commit is contained in:
parent
8c62ea92ad
commit
79547da7d3
@ -94,11 +94,6 @@ export default function Home() {
|
||||
/>
|
||||
{weatherData && (
|
||||
<div className={styles.statsBox}>
|
||||
<div className={styles.statsCard}>Stats card1</div>
|
||||
<div className={styles.statsCard}>Stats card2</div>
|
||||
<div className={styles.statsCard}>
|
||||
Visibility: {weatherData.visibility / 1000} km
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Humidity</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
@ -114,7 +109,6 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.statsCard}>
|
||||
<p>Wind speed</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
@ -130,6 +124,39 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Wind direction</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/014-compass.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>{degToCompass(weatherData.wind.deg)}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Visibility</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/binocular.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>{weatherData.visibility / 1000}</h1>
|
||||
<p>Km</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className={styles.statsCard}>
|
||||
Visibility: {weatherData.visibility / 1000} km
|
||||
</div> */}
|
||||
|
||||
{/* <div className={styles.statsCard}>
|
||||
<p>
|
||||
Wind:{" "}
|
||||
|
BIN
public/icons/binocular.png
Normal file
BIN
public/icons/binocular.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 28 KiB |
@ -19,12 +19,12 @@
|
||||
|
||||
.locationTitle {
|
||||
font-size: 38px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.weatherDescription {
|
||||
font-size: 24px;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.statsWrapper {
|
||||
|
Loading…
x
Reference in New Issue
Block a user