Setup frontend frame

frontend/package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/material": "^5.10.9",
+    "@mui/types": "^7.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,8 +15,10 @@
     "@types/node": "^16.11.65",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "@types/react-router-dom": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"

frontend/src/App.tsx

@@ -1,11 +1,23 @@
 import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+
+import FrontPage from './FrontPage';
+import BooksPage from './Books';
+import NavBar from './components/NavBar';
+
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        Worblehat client init
-      </header>
+    <div className="App">¨
+    <NavBar />
+      <Router>
+      <Routes>
+        {/* Sett opp en navbar ellerno */}
+
+        <Route path="/" element={<FrontPage />} />
+        <Route path="/books" element={<BooksPage />} />
+      </Routes>
+      </Router>
     </div>
   );
 }

frontend/src/Books.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Book from './components/Book';
+import { useEffect } from 'react';
+
+function BooksPage() {
+    const [books, setBooks] = React.useState<string[]>([]);
+    useEffect(() => {
+        setBooks(["The Hobbit", "The Lord of the Rings", "The Silmarillion"]); 
+    }, []);
+    
+    return (
+        <div>
+            <h1>
+                Books Page!
+            </h1>
+            <ul>
+                {books.map((title) => <Book title={title} />)}
+            </ul>
+        </div>
+        );
+    }
+    
+    export default BooksPage;

frontend/src/FrontPage.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+
+function FrontPage() {
+    return (
+      <div>
+        <h1>
+          Worblehat Frontpage
+        </h1>
+        <Button variant="contained" color="primary">Trykk her</Button>
+      </div>
+    );
+  }
+  
+  export default FrontPage;
+  

frontend/src/components/Book.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface BookProps {
+    title: string;
+}
+function Book(props: BookProps) {
+    return (
+        <li>
+          {props.title}
+        </li>
+    );
+  }
+  
+  export default Book;
+  

frontend/src/components/NavBar.tsx

@@ -0,0 +1,33 @@
+// Kopiert fra https://mui.com/material-ui/react-app-bar/  
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+
+export default function NavBar() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            News
+          </Typography>
+          <Button color="inherit">Login</Button>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+}