rename comp

components/MetricsBox.js

@@ -5,11 +5,11 @@ import {
   getVisibility,
   getWindSpeed,
 } from "../services/utils";
-import MetricCard from "./MetricCard";
+import MetricCard from "./MetricsCard";
 
-import styles from "./Metrics.module.css";
+import styles from "./MetricsBox.module.css";
 
-const Metrics = ({ data, systemUsed }) => {
+const MetricsBox = ({ data, systemUsed }) => {
   return (
     <div className={styles.statsBox}>
       <MetricCard
@@ -56,4 +56,4 @@ const Metrics = ({ data, systemUsed }) => {
   );
 };
 
-export default Metrics;
+export default MetricsBox;

components/MetricsCard.js

@@ -1,8 +1,8 @@
 import Image from "next/image";
 
-import styles from "./MetricCard.module.css";
+import styles from "./MetricsCard.module.css";
 
-const MetricCard = ({ title, iconSrc, metric, unit }) => {
+const MetricsCard = ({ title, iconSrc, metric, unit }) => {
   return (
     <div className={styles.statsCard}>
       <p>{title}</p>
@@ -17,4 +17,4 @@ const MetricCard = ({ title, iconSrc, metric, unit }) => {
   );
 };
 
-export default MetricCard;
+export default MetricsCard;

pages/index.js

@@ -5,7 +5,9 @@ import ContentBox from "../components/ContentBox";
 import Header from "../components/Header";
 import DateAndTime from "../components/DateAndTime";
 import Search from "../components/Search";
-import Metrics from "../components/Metrics";
+
+import MetricsBox from "../components/MetricsBox";
+import MetricsCard from "../components/MetricsCard";
 import UnitSwitch from "../components/UnitSwitch";
 import LoadingScreen from "../components/LoadingScreen";
 import ErrorScreen from "../components/ErrorScreen";
@@ -71,7 +73,7 @@ const App = () => {
             }}
           />
         </Header>
-        <Metrics data={weatherData} systemUsed={systemUsed} />
+        <MetricsBox data={weatherData} systemUsed={systemUsed} />
         <UnitSwitch onClick={changeSystem} systemUsed={systemUsed} />
       </ContentBox>
     </div>