feat(frontend): create pages and components

1 files changed, 12 insertions, 27 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b055af9..02db0ca 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,33 +1,18 @@
-import { useState } from "react";
-import viteLogo from "/vite.svg";
-import reactLogo from "./assets/react.svg";
+import { Redirect, Route, Switch } from "wouter";
+import { Layout } from "./components";
+import { NotFound, ReadArticles, Settings, UnreadArticles } from "./pages";
 
 function App() {
-	const [count, setCount] = useState(0);
-
 	return (
-		<>
-			<div>
-				<a href="https://vite.dev" target="_blank" rel="noopener">
-					<img src={viteLogo} className="logo" alt="Vite logo" />
-				</a>
-				<a href="https://react.dev" target="_blank" rel="noopener">
-					<img src={reactLogo} className="logo react" alt="React logo" />
-				</a>
-			</div>
-			<h1>Vite + React</h1>
-			<div className="card">
-				<button type="button" onClick={() => setCount((count) => count + 1)}>
-					count is {count}
-				</button>
-				<p>
-					Edit <code>src/App.tsx</code> and save to test HMR
-				</p>
-			</div>
-			<p className="read-the-docs">
-				Click on the Vite and React logos to learn more
-			</p>
-		</>
+		<Layout>
+			<Switch>
+				<Route path="/" component={() => <Redirect to="/unread" />} />
+				<Route path="/unread" component={UnreadArticles} />
+				<Route path="/read" component={ReadArticles} />
+				<Route path="/settings" component={Settings} />
+				<Route component={NotFound} />
+			</Switch>
+		</Layout>
 	);
 }