add stats card

pages/index.js

@@ -4,6 +4,7 @@ import Image from "next/image";
 
 export default function Home() {
   const [input, setInput] = useState();
+  const [defaultValue, setDefaultValue] = useState("Search a city...");
   const [isCurrentActive, setIsCurrentActive] = useState(true);
   const [weatherData, setWeatherData] = useState();
 
@@ -16,7 +17,9 @@ export default function Home() {
     const data = await res.json();
     console.log(data);
     setWeatherData({ ...data });
+
     setInput("");
+    // setDefaultValue("sss");
   };
 
   const something = (event) => {
@@ -69,43 +72,59 @@ export default function Home() {
             {Math.round(weatherData.main.temp)}°
           </h1>
           <p>Feels like {Math.round(weatherData.main.feels_like)}°</p>
-          <p>Humidity: {weatherData.main.humidity}</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>
+        <input
-        <div className={styles.statsBox}>
+          type="text"
-          <div>Stats card1</div>
+          className={styles.searchInput}
-          <div>Stats card2</div>
+          defaultValue={defaultValue}
-          <div>Stats card3</div>
+          placeholder="🔍 Search a city ..."
-          <div>Stats card4</div>
+          value={input}
-          <div>Stats card5</div>
+          onFocus={(e) => (e.target.value = "")}
-          <div>Stats card6</div>
+          onChange={(e) => setInput(e.target.value)}
-        </div>
+          onKeyDown={(e) => something(e)}
+        />
+        {weatherData && (
+          <div className={styles.statsBox}>
+            <div>Stats card1</div>
+            <div>Stats card2</div>
+            <div>Visibility: {weatherData.visibility / 1000} km</div>
+            <div>
+              <p>Humidity: {weatherData.main.humidity}</p>
+            </div>
+            <div>
+              <p>
+                Wind:{" "}
+                {` ${weatherData.wind.speed} ${degToCompass(
+                  weatherData.wind.deg
+                )}`}
+              </p>
+            </div>
+            <div style={{ padding: "20px", border: "1px solid grey" }}>
+              <p>
+                Sunrise:{" "}
+                {new Date(
+                  weatherData.sys.sunrise * 1000 + weatherData.timezone * 1000
+                ).toLocaleString("en-US")}
+              </p>
+              <p>
+                Sunset:{" "}
+                {new Date(weatherData.sys.sunset * 1000).toLocaleString(
+                  "en-US"
+                )}
+              </p>
+            </div>
+          </div>
+        )}
       </div>
-      <input
-        type="text"
-        className={styles.searchInput}
-        defaultValue="Search a cities..."
-        value={input}
-        onFocus={(e) => (e.target.value = "")}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyDown={(e) => something(e)}
-      />
     </div>
   );
 }

styles/Home.module.css

@@ -8,7 +8,7 @@
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   border-radius: 30px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  /* border: 1px solid rgba(255, 255, 255, 0.18); */
   display: grid;
   grid-template-columns: 1fr 2fr;
 }
@@ -30,14 +30,20 @@
 .statsWrapper {
   background-color: rgb(247, 247, 247);
   padding: 30px;
+  text-align: right;
+  border-radius: 0 30px 30px 0;
 }
 
 .statsBox {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+
+  border-radius: 20px;
 }
 
 .statsCard {
+  background: rgba(255, 255, 255, 0.95);
 }
 
 .mainTemp {
@@ -45,12 +51,17 @@
 }
 
 .searchInput {
-  margin-top: 200px;
+  margin-bottom: 20px;
   height: 40px;
   width: 300px;
   border: none;
   padding: 0 10px;
-  color: #242424;
+  color: #c5c5c5;
+  /* background-color: none; */
   font-size: 20px;
-  background: rgba(255, 255, 255, 0.25);
+  text-align: right;
+  /* background-color: rgb(247, 247, 247); */
+  border-radius: 20px;
+  font-family: "Varela Round", sans-serif;
+  font-size: 18px;
 }