code cleanup

pages/index.js

@@ -4,13 +4,14 @@ import Image from "next/image";
 
 export default function Home() {
   const [input, setInput] = useState("mumbai");
+  const [systemUsed, setSystemUsed] = useState("metric");
   const [weatherData, setWeatherData] = useState();
 
   const clickHandler = async () => {
     const res = await fetch("/api/data", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ input }),
+      body: JSON.stringify({ input, systemUsed }),
     });
     const data = await res.json();
     console.log(data);
@@ -55,6 +56,10 @@ export default function Home() {
     return time;
   };
 
+  const changeSystem = () => {
+    console.log("system changed");
+  };
+
   // console.log(convertTime(weatherData.dt, weatherData.timezone));
 
   return (
@@ -64,6 +69,7 @@ export default function Home() {
           <h1 className={styles.locationTitle}>
             {weatherData.name}, {weatherData.sys.country}
           </h1>
+
           <p className={styles.weatherDescription}>
             {weatherData.weather[0].description}
           </p>
@@ -78,22 +84,25 @@ export default function Home() {
             {Math.round(weatherData.main.temp)}°
           </h1>
           <p>Feels like {Math.round(weatherData.main.feels_like)}°</p>
-
-          {/* <h2>
-            {convertTime(weatherData.dt, weatherData.timezone)[0].split(":")[0]}
-            :00
-          </h2> */}
         </div>
       )}
       <div className={styles.statsWrapper}>
-        <input
+        <div className={styles.titleAndSearch}>
-          type="text"
+          <h2 style={{ textAlign: "left" }}>
-          className={styles.searchInput}
+            Today at:{" "}
-          defaultValue="Search a city..."
+            {convertTime(weatherData.dt, weatherData.timezone)[0].split(":")[0]}
-          onFocus={(e) => (e.target.value = "")}
+            :00
-          onChange={(e) => setInput(e.target.value)}
+          </h2>
-          onKeyDown={(e) => something(e)}
+          <input
-        />
+            type="text"
+            className={styles.searchInput}
+            defaultValue="Search a city..."
+            onFocus={(e) => (e.target.value = "")}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => something(e)}
+          />
+        </div>
+
         {weatherData && (
           <div className={styles.statsBox}>
             <div className={styles.statsCard}>
@@ -155,24 +164,6 @@ export default function Home() {
                 </div>
               </div>
             </div>
-            {/* <div className={styles.statsCard}>
-              Visibility: {weatherData.visibility / 1000} km
-            </div> */}
-
-            {/* <div className={styles.statsCard}>
-              <p>
-                Wind:{" "}
-                {` ${weatherData.wind.speed} ${degToCompass(
-                  weatherData.wind.deg
-                )}`}
-              </p>
-              <Image
-                alt="weatherIcon"
-                src={`/icons/wind.png`}
-                height="100px"
-                width="100px"
-              />
-            </div> */}
             <div className={styles.statsCard}>
               <p>Sunrise</p>
               <div className={styles.statsCardContent}>
@@ -194,19 +185,6 @@ export default function Home() {
                   <p>AM</p>
                 </div>
               </div>
-
-              {/* <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 className={styles.statsCard}>
               <p>Sunset</p>

styles/Home.module.css

@@ -32,11 +32,16 @@
   border-radius: 0 30px 30px 0;
 }
 
+.titleAndSearch {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 20px;
+}
+
 .statsBox {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 20px;
-
   border-radius: 20px;
 }
 
@@ -58,13 +63,13 @@
 .searchInput {
   margin-bottom: 20px;
   height: 40px;
-  width: 200px;
+  border: 2px solid rgb(34, 34, 34);
-  border: 2px solid rgb(230, 230, 230);
+  /* border: none; */
   padding: 0 10px;
-  color: #c5c5c5;
+  color: #303030;
   font-size: 20px;
   text-align: right;
-  border-radius: 20px;
+  border-radius: 3px;
   font-family: "Varela Round", sans-serif;
   font-size: 18px;
 }

styles/globals.css

@@ -17,6 +17,7 @@ body {
   );
   font-family: "Varela Round", sans-serif;
   min-height: 100vh;
+  padding-top: 50px;
 }
 
 a {