veikko/lintujamaslo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Intial general structure of source code and page.

Browse Source
This commit is contained in:
codevictory
2021-11-11 21:03:23 +02:00
parent 2581adce4d
commit e0d29f173d
19 changed files with 249 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.css
View File

@@ -3,3 +3,8 @@
.App {
text-align: center;
}
.App .App-content {
display: flex;
justify-content: center;
}

13
src/App.tsx
View File

@@ -1,18 +1,19 @@
import './App.css';
import { Header } from "./components/header";
import { RegForm } from './components/regForm';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import { Main } from './pages/Main';
import { Registration } from './pages/Registration';
export default function App() {
return (
<Router>
<Switch>
<Route exact path="/">
<Route exact path="/:page">
<div className="App">
<Header />
<Main />
</div>
</Route>
<Route path="/registration/:id" component={RegForm} />
<Route path="/registration/:id" component={Registration} />
<Redirect from="/" to="/program" />
</Switch>
</Router >
);

2
src/components/header.tsx → src/components/Header.tsx
View File

@@ -1,4 +1,4 @@
import "./../styles/header.css"
import "./styles/header.css"
export const Header = () => {
return (

56
src/components/Menu.tsx Normal file
View File

@@ -0,0 +1,56 @@
import "./styles/menu.css";
export const Menu = () => {
return (
<article>
<h1>Menu</h1>
<table>
<tr>
<th></th>
<th>Starters</th>
<th></th>
</tr>
<tr>
<td>Chrumky</td>
<td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
<td>Nuts</td>
</tr>
<tr>
<td>Halusky</td>
<td>Fatty fat stuff.</td>
<td>Meat, fat</td>
</tr>
<tr>
<th></th>
<th>Main dish</th>
<th></th>
</tr>
<tr>
<td>Chrumky</td>
<td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
<td>Nuts</td>
</tr>
<tr>
<td>Halusky</td>
<td>Fatty fat stuff.</td>
<td>Meat, fat</td>
</tr>
<tr>
<th></th>
<th>Dessert</th>
<th></th>
</tr>
<tr>
<td>Chrumky</td>
<td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
<td>Nuts</td>
</tr>
<tr>
<td>Halusky</td>
<td>Fatty fat stuff.</td>
<td>Meat, fat</td>
</tr>
</table>
</article>
)
}

10
src/components/NotFound.tsx Normal file
View File

@@ -0,0 +1,10 @@
import "./styles/notFound.css";
export const NotFound = () => {
return (
<article>
<h1>Page not found</h1>
<p>Check the link address...</p>
</article>
)
}

57
src/components/Program.tsx Normal file
View File

@@ -0,0 +1,57 @@
import { Link } from 'react-router-dom';
import "./styles/program.css";
export const Program = () => {
return (
<article>
<h1>Program</h1>
<table>
<tr>
<th></th>
<th>12:00</th>
<th></th>
</tr>
<tr>
<td>Speech</td>
<td>Boring BS. Lorem ipsum dolor sit amet.</td>
<td>Veikko</td>
</tr>
<tr>
<td>Lunch</td>
<td>Eating yummy yum.</td>
<td><Link to="/menu" >To menu</Link></td>
</tr>
<tr>
<th></th>
<th>14:00</th>
<th></th>
</tr>
<tr>
<td>Games</td>
<td>Activity lol.</td>
<td>Be active.</td>
</tr>
<tr>
<td>More something</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>More more more</td>
</tr>
<tr>
<th></th>
<th>23:00</th>
<th></th>
</tr>
<tr>
<td>More something</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>More more more</td>
</tr>
<tr>
<td>More something</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>More more more</td>
</tr>
</table>
</article>
)
}

6
src/components/regForm.tsx → src/components/RegForm.tsx
View File

@@ -1,8 +1,8 @@
import { Button, Checkbox, Col, Form, Input, Row, Select, Space } from 'antd';
import { Button, Checkbox, Col, Form, Input, Row, Select } from 'antd';
import { useParams } from 'react-router';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import "./../styles/registration.css"
import "./styles/regForm.css";
import { addVisitor } from '../api';
import { arrayToString, capFirstLetter } from './utils';
import { Visitor } from '../model/visitor';
@@ -49,7 +49,7 @@ export const RegForm = () => {
<>
{
fields.map(field => (
<div className="visitorContainer" key={field.key}>
<div className="visitors" key={field.key}>
<div className="nameBar">
<Form.Item
label="Name"

13
src/components/SideNav.tsx Normal file
View File

@@ -0,0 +1,13 @@
import "./styles/sideNav.css";
import { Link } from 'react-router-dom';
export const SideNav = () => {
return (
<aside className="SideNav">
<ul>
<li><Link to="/menu">Menu</Link></li>
<li><Link to="/program">Program</Link></li>
</ul>
</aside>
)
}

5
src/styles/header.css → src/components/styles/header.css
View File

@@ -1,6 +1,5 @@
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
@@ -8,3 +7,7 @@
font-size: calc(10px + 2vmin);
color: white;
}
.App-header h1 {
color: white;
}

21
src/components/styles/menu.css Normal file
View File

@@ -0,0 +1,21 @@
table {
width: 100%;
}
table,
td,
th {
border-bottom: 1px solid black;
}
th {
height: 10vh;
}
tr {
line-break: auto;
}
th,
td {
width: 33%;
}

0
src/components/styles/notFound.css Normal file
View File

21
src/components/styles/program.css Normal file
View File

@@ -0,0 +1,21 @@
table {
width: 100%;
}
table,
td,
th {
border-bottom: 1px solid black;
}
th {
height: 10vh;
}
tr {
line-break: auto;
}
th,
td {
width: 33%;
}

2
src/styles/registration.css → src/components/styles/regForm.css
View File

@@ -9,7 +9,7 @@ form#registration {
align-items: baseline;
}
.visitorContainer {
.visitors {
margin-top: 1em;
margin-bottom: 1em;
padding: 1em;

3
src/components/styles/sideNav.css Normal file
View File

@@ -0,0 +1,3 @@
.SideNav {
width: 333px;
}

27
src/pages/Main.tsx Normal file
View File

@@ -0,0 +1,27 @@
import "./styles/main.css";
import { useParams } from "react-router-dom";
import { Menu } from '../components/Menu';
import { Header } from '../components/Header';
import { SideNav } from '../components/SideNav';
import { Program } from '../components/Program';
import { NotFound } from '../components/NotFound';
interface MainParams {
page: string
}
export const Main = () => {
const { page } = useParams<MainParams>()
return (
<>
<Header />
<section className="App-content">
<SideNav />
{page === "menu" ? <Menu /> : page === "program" ? <Program /> : <NotFound />}
<div style={{ width: 333 }} />
</section>
</>
)
}

15
src/pages/Registration.tsx Normal file
View File

@@ -0,0 +1,15 @@
import "./styles/registration.css";
import { Header } from '../components/Header'
import { RegForm } from '../components/RegForm'
export const Registration = () => {
return (
<>
<Header />
<div className="Registration-form">
<RegForm />
</div>
</>
)
}

0
src/pages/styles/main.css Normal file
View File

4
src/pages/styles/registration.css Normal file
View File

@@ -0,0 +1,4 @@
.Registration-form {
display: flex;
justify-items: center;
}

0
src/shared.css Normal file
View File