create main card

components/MainCard.js

@@ -0,0 +1,47 @@
+import Image from "next/image";
+
+import { ctoF } from "../services/converters";
+
+import styles from "./MainCard.module.css";
+
+const MainCard = ({
+  city,
+  country,
+  description,
+  iconName,
+  systemUsed,
+  weatherData,
+}) => {
+  return (
+    <div className={styles.weatherWrapper}>
+      <h1 className={styles.locationTitle}>
+        {city}, {country}
+      </h1>
+
+      <p className={styles.weatherDescription}>{description}</p>
+
+      <Image
+        alt="weatherIcon"
+        src={`/icons/${iconName}.svg`}
+        height="300px"
+        width="300px"
+      />
+
+      <h1 className={styles.mainTemp}>
+        {systemUsed == "metric"
+          ? Math.round(weatherData.main.temp)
+          : Math.round(ctoF(weatherData.main.temp))}
+        °{systemUsed == "metric" ? "C" : "F"}
+      </h1>
+      <p>
+        Feels like{" "}
+        {systemUsed == "metric"
+          ? Math.round(weatherData.main.feels_like)
+          : Math.round(ctoF(weatherData.main.feels_like))}
+        °{systemUsed == "metric" ? "C" : "F"}
+      </p>
+    </div>
+  );
+};
+
+export default MainCard;

components/MainCard.module.css

@@ -0,0 +1,17 @@
+.weatherWrapper {
+  padding: 30px;
+}
+
+.locationTitle {
+  font-size: 38px;
+  margin-bottom: 10px;
+}
+
+.weatherDescription {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.mainTemp {
+  font-size: 84px;
+}

pages/index.js

@@ -1,12 +1,12 @@
 import { useState, useEffect } from "react";
-import Image from "next/image";
 
+import MainCard from "../components/MainCard";
 import Metrics from "../components/Metrics";
 import SwitchBox from "../components/SwitchBox";
 import LoadingScreen from "../components/LoadingScreen";
 import ErrorScreen from "../components/ErrorScreen";
 
-import { convertTime, ctoF, timeToAMPM } from "../services/converters";
+import { convertTime, timeToAMPM } from "../services/converters";
 import { isPM } from "../services/utils";
 
 import styles from "../styles/Home.module.css";
@@ -55,37 +55,15 @@ const App = () => {
 
   return weatherData && !weatherData.message ? (
     <div className={styles.wrapper}>
-      <div className={styles.weatherWrapper}>
+      <MainCard
-        <h1 className={styles.locationTitle}>
+        city={weatherData.name}
-          {weatherData.name}, {weatherData.sys.country}
+        country={weatherData.sys.country}
-        </h1>
+        description={weatherData.weather[0].description}
-
+        iconName={weatherData.weather[0].icon}
-        <p className={styles.weatherDescription}>
+        systemUsed={systemUsed}
-          {weatherData.weather[0].description}
+        weatherData={weatherData}
-        </p>
-
-        <Image
-          alt="weatherIcon"
-          src={`/icons/${weatherData.weather[0].icon}.svg`}
-          height="300px"
-          width="300px"
       />
 
-        <h1 className={styles.mainTemp}>
-          {systemUsed == "metric"
-            ? Math.round(weatherData.main.temp)
-            : Math.round(ctoF(weatherData.main.temp))}
-          °{systemUsed == "metric" ? "C" : "F"}
-        </h1>
-        <p>
-          Feels like{" "}
-          {systemUsed == "metric"
-            ? Math.round(weatherData.main.feels_like)
-            : Math.round(ctoF(weatherData.main.feels_like))}
-          °{systemUsed == "metric" ? "C" : "F"}
-        </p>
-      </div>
-
       <div className={styles.statsWrapper}>
         <div className={styles.titleAndSearch}>
           <h2 style={{ textAlign: "left" }}>

styles/Home.module.css

@@ -15,20 +15,6 @@
   display: none;
 }
 
-.weatherWrapper {
-  padding: 30px;
-}
-
-.locationTitle {
-  font-size: 38px;
-  margin-bottom: 10px;
-}
-
-.weatherDescription {
-  font-size: 24px;
-  margin-bottom: 20px;
-}
-
 .statsWrapper {
   background-color: rgb(247, 247, 247);
   padding: 30px;
@@ -42,10 +28,6 @@
   gap: 20px;
 }
 
-.mainTemp {
-  font-size: 84px;
-}
-
 .searchInput {
   margin-bottom: 20px;
   height: 40px;