Relates #27

Closes #25
Relates #17
Relates #9

src/App.tsx

@@ -2,16 +2,12 @@ import './App.css';
 import Header from './sections/Header';
 import Content from './sections/Content';
 import Footer from './sections/Footer';
-import Button from './buttons/Button';
 
 function App() {
   return (
 		<>
 			<Header />
 			<Content />
-			<Button onClick={function (): void {
-			  throw new Error('Function not implemented.')
-		    } } label={'Click me'} />
 			<Footer />
 		</>
   );

src/forms/NameForm.tsx

@@ -1,9 +1,19 @@
+import React from 'react';
 import Button from '../buttons/Button';
 import NameInput from '../inputs/NameInput';
 
-function NameForm() {
+interface NameFormProps {
+	onSubmit: () => void;
+}
+
+function NameForm({ onSubmit }: NameFormProps) {
+	const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		onSubmit();
+	};
+
 	return (
-		<form>
+		<form onSubmit={handleSubmit}>
 			<NameInput />
 			<Button
 				onClick={() => {

src/pages/Dummy.tsx

@@ -0,0 +1,17 @@
+import Button from "../buttons/Button";
+
+interface DummyProps {
+	onNext: () => void;
+}
+
+function Dummy({ onNext }: DummyProps) {
+  return (
+    // render background image that fills the whole component
+		<div>
+			<p>lol no</p>
+			<Button onClick={onNext} label="Back to Landing" />
+		</div>
+  )
+}
+
+export default Dummy;

src/pages/Landing.tsx

@@ -1,12 +1,16 @@
-import FormName from '../forms/NameForm';
+import NameForm from '../forms/NameForm';
 import LandingText from '../text/LandingText';
 
-function Landing() {
+interface LandingProps {
+	onNext: () => void;
+}
+
+function Landing({ onNext }: LandingProps) {
   return (
     // render background image that fills the whole component
 		<>
 			<LandingText />
-			<FormName />
+			<NameForm onSubmit={onNext} />
 		</>
   )
 }

src/sections/Content.tsx

@@ -1,14 +1,35 @@
+import { useState } from 'react';
 import Landing from '../pages/Landing';
-/* import Input from '../pages/Input'; */
-/* import Loading from '../pages/Loading'; */
-/* import Playlist from '../pages/Playlist'; */
+// import Input from '../pages/Input';
+// import Loading from '../pages/Loading';
+// import Playlist from '../pages/Playlist';
+import Dummy from '../pages/Dummy';
 
 function Content() {
-  return (
-    <main>
-			<Landing />
+	const [currentPage, setCurrentPage] = useState('landing');
+
+	const renderPage = () => {
+		switch (currentPage) {
+			case 'dummy':
+				return <Dummy onNext={() => setCurrentPage('landing')} />;
+			case 'landing':
+				return <Landing onNext={() => setCurrentPage('dummy')} />;
+			// case 'input':
+			// 	return <Input onNext={() => setCurrentPage('loading')} />;
+			// case 'loading':
+			// 	return <Loading onNext={() => setCurrentPage('playlist')} />;
+			// case 'playlist':
+			// 	return <Playlist />;
+			default:
+				return <Dummy onNext={() => setCurrentPage('Landing')} />;
+		}
+	};
+
+	return (
+		<main>
+			{renderPage()}
 		</main>
-  )
+	)
 }
 
 export default Content;