Setup frontend frame
This commit is contained in:
parent
77c70b0514
commit
96a7653722
File diff suppressed because it is too large
Load Diff
|
@ -3,6 +3,11 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"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/jest-dom": "^5.16.5",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
@ -10,8 +15,10 @@
|
||||||
"@types/node": "^16.11.65",
|
"@types/node": "^16.11.65",
|
||||||
"@types/react": "^18.0.21",
|
"@types/react": "^18.0.21",
|
||||||
"@types/react-dom": "^18.0.6",
|
"@types/react-dom": "^18.0.6",
|
||||||
|
"@types/react-router-dom": "^5.3.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.4.2",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"typescript": "^4.8.4",
|
"typescript": "^4.8.4",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
|
|
|
@ -1,11 +1,23 @@
|
||||||
import React from 'react';
|
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() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">¨
|
||||||
<header className="App-header">
|
<NavBar />
|
||||||
Worblehat client init
|
<Router>
|
||||||
</header>
|
<Routes>
|
||||||
|
{/* Sett opp en navbar ellerno */}
|
||||||
|
|
||||||
|
<Route path="/" element={<FrontPage />} />
|
||||||
|
<Route path="/books" element={<BooksPage />} />
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
|
@ -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;
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface BookProps {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
function Book(props: BookProps) {
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
{props.title}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Book;
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue