Setup frontend frame

This commit is contained in:
Felix Albrigtsen 2022-10-15 19:49:37 +02:00
parent 77c70b0514
commit 96a7653722
7 changed files with 1045 additions and 4 deletions

File diff suppressed because it is too large Load Diff

View File

@ -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"

View File

@ -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>
);
}

23
frontend/src/Books.tsx Normal file
View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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>
);
}