add stats box

pages/index.js

@@ -4,6 +4,7 @@ import Image from "next/image";
 
 export default function Home() {
   const [input, setInput] = useState();
+  const [isCurrentActive, setIsCurrentActive] = useState(true);
   const [weatherData, setWeatherData] = useState();
 
   const clickHandler = async () => {
@@ -24,10 +25,33 @@ export default function Home() {
     }
   };
 
+  function degToCompass(num) {
+    var val = Math.floor(num / 22.5 + 0.5);
+    var arr = [
+      "N",
+      "NNE",
+      "NE",
+      "ENE",
+      "E",
+      "ESE",
+      "SE",
+      "SSE",
+      "S",
+      "SSW",
+      "SW",
+      "WSW",
+      "W",
+      "WNW",
+      "NW",
+      "NNW",
+    ];
+    return arr[val % 16];
+  }
+
   return (
     <div className={styles.wrapper}>
       {weatherData && (
-        <>
+        <div className={styles.weatherWrapper}>
           <h1 className={styles.locationTitle}>
             {weatherData.name}, {weatherData.sys.country}
           </h1>
@@ -46,9 +70,33 @@ export default function Home() {
           </h1>
           <p>Feels like {Math.round(weatherData.main.feels_like)}°</p>
           <p>Humidity: {weatherData.main.humidity}</p>
-          <p>Wind: {weatherData.wind.speed}</p>
-        </>
+          <p>
+            Wind:{" "}
+            {`${weatherData.wind.speed} to ${
+              weatherData.wind.gust
+            } ${degToCompass(weatherData.wind.deg)}`}
+          </p>
+          <p>
+            Time:{" "}
+            {new Date(
+              weatherData.dt * 1000 + weatherData.timezone * 1000
+            ).toLocaleString("en-US")}
+          </p>
+          <p>Sunrise: {weatherData.sys.sunrise}</p>
+          <p>Sunstet: {weatherData.sys.sunset}</p>
+        </div>
       )}
+      <div className={styles.statsWrapper}>
+        <h1>Stats info</h1>
+        <div className={styles.statsBox}>
+          <div>Stats card1</div>
+          <div>Stats card2</div>
+          <div>Stats card3</div>
+          <div>Stats card4</div>
+          <div>Stats card5</div>
+          <div>Stats card6</div>
+        </div>
+      </div>
       <input
         type="text"
         className={styles.searchInput}

styles/Home.module.css

@@ -1,14 +1,20 @@
 .wrapper {
-  max-width: 600px;
+  max-width: 1200px;
   margin: 30px auto;
   text-align: center;
-  padding: 30px;
-  background: rgba(255, 255, 255, 0.25);
+
+  background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 8px 32px 0 rgba(83, 89, 179, 0.37);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
-  border-radius: 10px;
+  border-radius: 30px;
   border: 1px solid rgba(255, 255, 255, 0.18);
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+
+.weatherWrapper {
+  padding: 30px;
 }
 
 .locationTitle {
@@ -21,6 +27,19 @@
   margin-bottom: 30px;
 }
 
+.statsWrapper {
+  background-color: rgb(247, 247, 247);
+  padding: 30px;
+}
+
+.statsBox {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.statsCard {
+}
+
 .mainTemp {
   font-size: 84px;
 }