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