Use latest functional components and hooks

src/components/ErrorNotice/ErrorNotice.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import classes from "./ErrorNotice.module.css";
+import Button from "../../elements/Button/Button";
+
+const ErrorNotice = ({ onClickHandler }) => {
+  return (
+    <div className={classes.ErrorNoticeWrapper}>
+      <h1 className={classes.NotFound404}>404</h1>
+      <div className={classes.ErrorTextWrapper}>
+        <h2 className={classes.NotFoundHeading}>Oops!</h2>
+        <p className={classes.NotFoundDetails}>
+          We can't find the city you are looking for.
+        </p>
+        <Button
+          name="tryAgain"
+          type="button"
+          position="onErrorNotice"
+          clicked={onClickHandler}
+        >
+          Try again
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorNotice;

src/components/Footer/Footer.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import classes from "./Footer.module.css";
+import Logo from "../../elements/Logo/Logo";
+
+const Footer = ({ onClickHandler }) => {
+  return (
+    <footer className={classes.Footer}>
+      <Logo colorScheme="dark" clicked={onClickHandler} />
+      <div className={classes.Separator}></div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Header/Header.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import classes from "./Header.module.css";
+import Logo from "../../elements/Logo/Logo";
+
+const Header = ({ onClickHandler, color }) => {
+  return (
+    <header className={classes.Header} style={{ backgroundColor: color }}>
+      <Logo colorScheme={"light"} clicked={onClickHandler} />
+    </header>
+  );
+};
+
+export default Header;

src/components/Preview/Preview.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import classes from "./Preview.module.css";
+
+const Preview = () => {
+  return (
+    <img
+      src={require("../../assets/images/Preview.svg")}
+      alt="Weather App Icon"
+      className={classes.Preview}
+    />
+  );
+};
+
+export default Preview;

src/components/SearchBar/SearchBar.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import classes from "./SearchBar.module.css";
+import InputField from "../../elements/InputField/InputField";
+import Button from "../../elements/Button/Button";
+
+const SearchBar = ({ value, error, onChangeHandler, onClickHandler }) => {
+  return (
+    <div className={classes.SearchBarWrapper}>
+      <InputField
+        type="text"
+        name="city"
+        label="Location"
+        placeholder="Enter a city"
+        value={value}
+        handleChange={onChangeHandler}
+        error={error}
+      />
+      <Button
+        name="searchSubmit"
+        type="submit"
+        position="onForm"
+        clicked={onClickHandler}
+      >
+        Set
+      </Button>
+    </div>
+  );
+};
+
+export default SearchBar;

src/components/WeatherDetails/Date/Date.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import dateformat from "dateformat";
+
+import classes from "./Date.module.css";
+
+const TodayDate = () => {
+  return (
+    <div className={classes.DateWrapper}>
+      {dateformat(new Date(), "dddd, mmmm dd")}
+    </div>
+  );
+};
+
+export default TodayDate;

src/components/WeatherDetails/Description/Description.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import classes from "./Description.module.css";
+
+const Description = ({ type }) => {
+  return <div className={classes.DescriptionWrapper}>{type}</div>;
+};
+
+export default Description;

src/components/WeatherDetails/Temperature/Temperature.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import classes from "./Temperature.module.css";
+
+const Temperature = ({ degrees }) => {
+  return (
+    <div className={classes.TemperatureWrapper}>
+      {Math.round(degrees)}
+      <span className={classes.TemperatureSymbol}>°</span>
+    </div>
+  );
+};
+
+export default Temperature;

src/components/WeatherDetails/WeatherDetails.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import classes from "./WeatherDetails.module.css";
+import Icon from "../../elements/Icon/Icon";
+import Temperature from "./Temperature/Temperature";
+import Description from "./Description/Description";
+import TodayDate from "./Date/Date";
+
+const WeatherDetails = ({ data }) => {
+  return (
+    <div className={classes.WeatherDetailsWrapper}>
+      <div className={classes.WeatherIconWrapper}>
+        <Icon type={data.description} />
+      </div>
+      <div className={classes.WeatherDataWrapper}>
+        <Temperature degrees={data.temperature} />
+        <Description type={data.description} />
+        <TodayDate />
+      </div>
+    </div>
+  );
+};
+
+export default WeatherDetails;