From 18bea1e7868a2e10e2faa052620e41cfb4717763 Mon Sep 17 00:00:00 2001
From: Wouter van Veelen <wouter.vanveelen@cofano.nl>
Date: Mon, 24 Nov 2025 00:37:55 +0100
Subject: [PATCH] Implement basic structure

---
 src/App.tsx            | 27 +++++++++++++--------------
 src/layout/Content.tsx | 14 ++++++++++++++
 src/layout/TopBar.tsx  | 29 +++++++++++++++++++++++++++++
 src/pages/About.tsx    |  5 +++++
 src/pages/Home.tsx     | 11 +++++++++++
 5 files changed, 72 insertions(+), 14 deletions(-)
 create mode 100644 src/layout/Content.tsx
 create mode 100644 src/layout/TopBar.tsx
 create mode 100644 src/pages/About.tsx
 create mode 100644 src/pages/Home.tsx

diff --git a/src/App.tsx b/src/App.tsx
index dc2c433..b4c8244 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,22 @@
-import { Card, CardContent, Container, ThemeProvider, Typography } from '@mui/material';
+import { ThemeProvider } from '@mui/material';
 import { Theme } from './Theme.ts';
+import { BrowserRouter, Route, Routes } from 'react-router';
+import { Content } from './layout/Content.tsx';
+import { Home } from './pages/Home.tsx';
+import { About } from './pages/About.tsx';
 
 function App() {
     return (
         <>
             <ThemeProvider theme={Theme}>
-                <Container>
-                    <Card>
-                        <CardContent sx={{ height: '2000px' }}>
-                            <Typography
-                                // sx={(theme) => ({ color: theme.palette.text.secondary })}
-                                fontSize={36}
-                                fontFamily='hammersmith-one'
-                            >
-                                Hello, World!
-                            </Typography>
-                        </CardContent>
-                    </Card>
-                </Container>
+                <BrowserRouter>
+                    <Content>
+                        <Routes>
+                            <Route index path='home' element={<Home />} />
+                            <Route path='about' element={<About />} />
+                        </Routes>
+                    </Content>
+                </BrowserRouter>
             </ThemeProvider>
         </>
     );
diff --git a/src/layout/Content.tsx b/src/layout/Content.tsx
new file mode 100644
index 0000000..e75fec8
--- /dev/null
+++ b/src/layout/Content.tsx
@@ -0,0 +1,14 @@
+import { Box } from '@mui/material';
+import React, { type PropsWithChildren, type ReactElement } from 'react';
+import { TopBar } from './TopBar.tsx';
+
+export type ContentProps = PropsWithChildren;
+
+export function Content({ children }: ContentProps): ReactElement {
+    return (
+        <Box sx={{ width: { xs: '100%', md: '80%' }, margin: 'auto' }}>
+            <TopBar />
+            {children}
+        </Box>
+    );
+}
diff --git a/src/layout/TopBar.tsx b/src/layout/TopBar.tsx
new file mode 100644
index 0000000..1e9b297
--- /dev/null
+++ b/src/layout/TopBar.tsx
@@ -0,0 +1,29 @@
+import React, { type ReactElement } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import { useLocation, useNavigate } from 'react-router';
+
+const ValidTabs = ['home', 'about', 'contact'] as const satisfies string[];
+
+export function TopBar(): ReactElement {
+    const { pathname } = useLocation();
+    const navigate = useNavigate();
+    const selectedTab =
+        ValidTabs.find((tabName) => pathname.toLowerCase().startsWith('/' + tabName)) ??
+        ValidTabs[0];
+
+    return (
+        <Box sx={{ width: '100%', marginBottom: '10px', boxShadow: '0 3px 5px -5px white' }}>
+            <Tabs
+                variant='fullWidth'
+                centered
+                sx={{ fontSize: 32 }}
+                value={selectedTab}
+                onChange={(_, value) => navigate('/' + value)}
+            >
+                {ValidTabs.map((tab) => (
+                    <Tab key={tab} label={tab} value={tab} />
+                ))}
+            </Tabs>
+        </Box>
+    );
+}
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..bd5b83d
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,5 @@
+import { Fragment, type ReactElement } from 'react';
+
+export function About(): ReactElement {
+    return <Fragment>Hello, About.</Fragment>;
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..27aa4b5
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,11 @@
+import React, { type ReactElement } from 'react';
+import { Card, CardContent, CardHeader } from '@mui/material';
+
+export function Home(): ReactElement {
+    return (
+        <Card>
+            <CardHeader title='Home'></CardHeader>
+            <CardContent>Hello, others</CardContent>
+        </Card>
+    );
+}