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
-          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 className={styles.titleAndSearch}>
+          <h2 style={{ textAlign: "left" }}>
+            Today at:{" "}
+            {convertTime(weatherData.dt, weatherData.timezone)[0].split(":")[0]}
+            :00
+          </h2>
+          <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>