Created_footer_and_header

client/src/Components/Footer.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Footer = () => {
+  return (
+    <div>Footer</div>
+  );
+};
+
+export default Footer;

client/src/Components/Header.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Header = () => {
+  return (
+    <div><button>About</button></div>
+  );
+};
+
+export default Header;

client/src/pages/Home.js

@@ -1,43 +1,52 @@
-import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+// import { useEffect, useState } from "react";
+// import { Link } from "react-router-dom";
 
 import "./Home.css";
-import logo from "./logo.svg";
+import Header from "../Components/Header";
+import Footer from "../Components/Footer";
+// import logo from "./logo.svg";
 
 export function Home() {
-	const [message, setMessage] = useState("Loading...");
+	// const [message, setMessage] = useState("Loading...");
 
-	useEffect(() => {
-		fetch("/api")
-			.then((res) => {
-				if (!res.ok) {
-					throw new Error(res.statusText);
-				}
-				return res.json();
-			})
-			.then((body) => {
-				setMessage(body.message);
-			})
-			.catch((err) => {
-				console.error(err);
-			});
-	}, []);
+	// useEffect(() => {
+	// 	fetch("/api")
+	// 		.then((res) => {
+	// 			if (!res.ok) {
+	// 				throw new Error(res.statusText);
+	// 			}
+	// 			return res.json();
+	// 		})
+	// 		.then((body) => {
+	// 			setMessage(body.message);
+	// 		})
+	// 		.catch((err) => {
+	// 			console.error(err);
+	// 		});
+	// }, []);
 
+	// return (
+	// 	<main role="main">
+	// 		<div>
+	// 			<img
+	// 				className="logo"
+	// 				data-qa="logo"
+	// 				src={logo}
+	// 				alt="Just the React logo"
+	// 			/>
+	// 			<h1 className="message" data-qa="message">
+	// 				{message}
+	// 			</h1>
+	// 			<Link to="/about/this/site">About</Link>
+	// 		</div>
+	// 	</main>
+	// );
 	return (
-		<main role="main">
-			<div>
-				<img
-					className="logo"
-					data-qa="logo"
-					src={logo}
-					alt="Just the React logo"
-				/>
-				<h1 className="message" data-qa="message">
-					{message}
-				</h1>
-				<Link to="/about/this/site">About</Link>
-			</div>
-		</main>
+		<div>
+			<Header />
+			<h1>Suggestion Generator</h1>
+			<Footer />
+		</div>
 	);
 }