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;
+}