switch export const

components/ContentBox.js

@@ -1,7 +1,5 @@
 import styles from "./ContentBox.module.css";
 
-const ContentBox = ({ children }) => {
+export const ContentBox = ({ children }) => {
   return <div className={styles.wrapper}>{children}</div>;
 };
-
-export default ContentBox;

components/DateAndTime.js

@@ -1,7 +1,7 @@
 import { getWeekDay, getTime, getAMPM } from "../services/utils";
 import styles from "./DateAndTime.module.css";
 
-const DateAndTime = ({ weatherData, systemUsed }) => {
+export const DateAndTime = ({ weatherData, systemUsed }) => {
   return (
     <h2 className={styles.title}>
       {`${getWeekDay(weatherData)}, ${getTime(
@@ -11,6 +11,4 @@ const DateAndTime = ({ weatherData, systemUsed }) => {
       )} ${getAMPM(systemUsed, weatherData.dt, weatherData.timezone)}`}
     </h2>
   );
-};
-
-export default DateAndTime;
+};

components/ErrorScreen.js

@@ -1,6 +1,6 @@
 import styles from "./ErrorScreen.module.css";
 
-const ErrorScreen = ({ errorMessage, children }) => {
+export const ErrorScreen = ({ errorMessage, children }) => {
   return (
     <div className={styles.wrapper}>
       <h1 className={styles.message}>{errorMessage}</h1>
@@ -8,5 +8,3 @@ const ErrorScreen = ({ errorMessage, children }) => {
     </div>
   );
 };
-
-export default ErrorScreen;

components/Header.js

@@ -1,7 +1,5 @@
 import styles from "./Header.module.css";
 
-const Header = ({ children }) => {
+export const Header = ({ children }) => {
   return <div className={styles.wrapper}>{children}</div>;
 };
-
-export default Header;

components/LoadingScreen.js

@@ -1,11 +1,9 @@
 import styles from "./LoadingScreen.module.css";
 
-const LoadingScreen = ({ loadingMessage }) => {
+export const LoadingScreen = ({ loadingMessage }) => {
   return (
     <div className={styles.wrapper}>
       <h1>{loadingMessage}</h1>
     </div>
   );
 };
-
-export default LoadingScreen;

components/MainCard.js

@@ -2,7 +2,7 @@ import Image from "next/image";
 import { ctoF } from "../services/converters";
 import styles from "./MainCard.module.css";
 
-const MainCard = ({
+export const MainCard = ({
   city,
   country,
   description,
@@ -37,6 +37,4 @@ const MainCard = ({
       </p>
     </div>
   );
-};
-
-export default MainCard;
+};

components/MetricsBox.js

@@ -5,36 +5,36 @@ import {
   getVisibility,
   getWindSpeed,
 } from "../services/utils";
-import MetricCard from "./MetricsCard";
+import {MetricsCard} from "./MetricsCard";
 import styles from "./MetricsBox.module.css";
 
-const MetricsBox = ({ weatherData, systemUsed }) => {
+export const MetricsBox = ({ weatherData, systemUsed }) => {
   return (
     <div className={styles.wrapper}>
-      <MetricCard
+      <MetricsCard
         title={"Humidity"}
         iconSrc={"/icons/humidity.png"}
         metric={weatherData.main.humidity}
         unit={"%"}
       />
-      <MetricCard
+      <MetricsCard
         title={"Wind speed"}
         iconSrc={"/icons/wind.png"}
         metric={getWindSpeed(systemUsed, weatherData.wind.speed)}
         unit={systemUsed == "metric" ? "m/s" : "m/h"}
       />
-      <MetricCard
+      <MetricsCard
         title={"Wind direction"}
         iconSrc={"/icons/compass.png"}
         metric={degToCompass(weatherData.wind.deg)}
       />
-      <MetricCard
+      <MetricsCard
         title={"Visibility"}
         iconSrc={"/icons/binocular.png"}
         metric={getVisibility(systemUsed, weatherData.visibility)}
         unit={systemUsed == "metric" ? "km" : "miles"}
       />
-      <MetricCard
+      <MetricsCard
         title={"Sunrise"}
         iconSrc={"/icons/sunrise.png"}
         metric={getTime(
@@ -48,7 +48,7 @@ const MetricsBox = ({ weatherData, systemUsed }) => {
           weatherData.timezone
         )}
       />
-      <MetricCard
+      <MetricsCard
         title={"Sunset"}
         iconSrc={"/icons/sunset.png"}
         metric={getTime(
@@ -60,6 +60,4 @@ const MetricsBox = ({ weatherData, systemUsed }) => {
       />
     </div>
   );
-};
-
-export default MetricsBox;
+};

components/MetricsCard.js

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import styles from "./MetricsCard.module.css";
 
-const MetricsCard = ({ title, iconSrc, metric, unit }) => {
+export const MetricsCard = ({ title, iconSrc, metric, unit }) => {
   return (
     <div className={styles.wrapper}>
       <p>{title}</p>
@@ -15,5 +15,3 @@ const MetricsCard = ({ title, iconSrc, metric, unit }) => {
     </div>
   );
 };
-
-export default MetricsCard;

components/Search.js

@@ -1,6 +1,6 @@
 import styles from "./Search.module.css";
 
-const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
+export const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
   return (
     <input
       className={styles.search}
@@ -13,5 +13,3 @@ const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
     />
   );
 };
-
-export default Search;

components/UnitSwitch.js

@@ -1,6 +1,6 @@
 import styles from "./UnitSwitch.module.css";
 
-const UnitSwitch = ({ onClick, systemUsed }) => {
+export const UnitSwitch = ({ onClick, systemUsed }) => {
   return (
     <div className={styles.wrapper}>
       <p
@@ -20,5 +20,3 @@ const UnitSwitch = ({ onClick, systemUsed }) => {
     </div>
   );
 };
-
-export default UnitSwitch;

pages/index.js

@@ -1,18 +1,18 @@
 import { useState, useEffect } from "react";
 
-import MainCard from "../components/MainCard";
-import ContentBox from "../components/ContentBox";
-import Header from "../components/Header";
-import DateAndTime from "../components/DateAndTime";
-import Search from "../components/Search";
-import MetricsBox from "../components/MetricsBox";
-import UnitSwitch from "../components/UnitSwitch";
-import LoadingScreen from "../components/LoadingScreen";
-import ErrorScreen from "../components/ErrorScreen";
+import {MainCard} from "../components/MainCard";
+import {ContentBox} from "../components/ContentBox";
+import {Header} from "../components/Header";
+import {DateAndTime} from "../components/DateAndTime";
+import {Search} from "../components/Search";
+import {MetricsBox} from "../components/MetricsBox";
+import {UnitSwitch} from "../components/UnitSwitch";
+import {LoadingScreen} from "../components/LoadingScreen";
+import {ErrorScreen} from "../components/ErrorScreen";
 
 import styles from "../styles/Home.module.css";
 
-const App = () => {
+export const App = () => {
   const [input, setInput] = useState("Riga");
   const [execute, setExecute] = useState(true);
   const [weatherData, setWeatherData] = useState();