Add routing

client/src/App.tsx

@@ -1,7 +1,19 @@
+import { Route, Routes } from 'react-router';
+
+import Home from 'pages/Home';
+import Languages from 'pages/Languages';
 import Typing from 'pages/Typing';
+import NotFound from 'pages/NotFound';
 
 function App() {
-  return <Typing />;
+  return (
+    <Routes>
+      <Route index element={<Home />} />
+      <Route path='languages' element={<Languages />} />
+      <Route path='typing/:lang' element={<Typing />} />
+      <Route path='*' element={<NotFound />} />
+    </Routes>
+  );
 }
 
 export default App;

client/src/main.tsx

@@ -1,8 +1,13 @@
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router';
 
 import App from './App.tsx';
 
 import './index.css';
 
 // TODO: Bring back strict mode when building and deploying
-createRoot(document.getElementById('root')).render(<App />);
+createRoot(document.getElementById('root')).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);

client/src/pages/Home/index.css

@@ -0,0 +1,3 @@
+.container {
+	text-align: left;
+}

client/src/pages/Home/index.tsx

@@ -0,0 +1,11 @@
+import './index.css';
+
+function Home() {
+  return (
+    <div className='container'>
+      <h1>Home</h1>
+    </div>
+  );
+}
+
+export default Home;

client/src/pages/Languages/index.css

@@ -0,0 +1,3 @@
+.container {
+	text-align: left;
+}

client/src/pages/Languages/index.tsx

@@ -0,0 +1,11 @@
+import './index.css';
+
+function Languages() {
+  return (
+    <div className='container'>
+      <h1>Languages</h1>
+    </div>
+  );
+}
+
+export default Languages;

client/src/pages/NotFound/index.css

@@ -0,0 +1,3 @@
+.container {
+	text-align: left;
+}

client/src/pages/NotFound/index.tsx

@@ -0,0 +1,11 @@
+import './index.css';
+
+function NotFound() {
+  return (
+    <div className='container'>
+      <h1>Not Found</h1>
+    </div>
+  );
+}
+
+export default NotFound;

client/src/pages/Typing/index.tsx

@@ -6,8 +6,10 @@ import Code from 'components/Code';
 import Stats from 'components/Stats';
 
 import './index.css';
+import { useParams } from 'react-router';
 
 function Typing() {
+  const {lang} = useParams();
   const [code, setCode] = useState<string>('');
   const [loaded, setLoaded] = useState<boolean>(false);
 
@@ -16,7 +18,7 @@ function Typing() {
       setCode('');
 
       const response = await fetch(
-        `${import.meta.env.VITE_API_URL}/generate?lang=lisp`,
+        `${import.meta.env.VITE_API_URL}/generate?lang=${lang}`,
       );
 
       if (!response.ok || !response.body) return;