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

Improving main page.

Browse Source
This commit is contained in:
codevictory
2021-12-19 21:12:54 +02:00
parent ad913d951e
commit 25b1699991
9 changed files with 198 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.scss
View File

@@ -1,15 +1 @@
@import 'antd/dist/antd.variable.min.css';
@import './colors.scss';
.App {
text-align: center;
}
.App .App-content {
display: flex;
justify-content: center;
}
article {
margin: 2em;
}

25
src/App.tsx
View File

@@ -1,39 +1,32 @@
import "./App.scss";
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import './App.scss';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { currentLanguage } from './atoms/language';
import { Main } from './pages/Main';
import { Registration } from './pages/Registration';
import { IntlProvider } from 'react-intl';
import { localization } from './constants/localization';
import { Header } from './components/Header';
import { ConfigProvider } from 'antd';
import { LanguagePicker } from './components/LanguagePicker';
export default function App() {
const language = useRecoilValue(currentLanguage)
const language = useRecoilValue(currentLanguage);
ConfigProvider.config({
theme: {
primaryColor: '#a7ab81',
}
},
});
return (
<IntlProvider locale={language} messages={localization[language]}>
<Header />
<LanguagePicker />
<Router>
<Switch>
<Route exact path="/:page">
<div className="App">
<Main />
</div>
</Route>
<Route path="/registration/:id" component={Registration} />
<Redirect from="/" to="/program" />
<Route path='/' exact component={Main} />
<Route path='/:page' exact component={Main} />
<Route path='/registration/:id' component={Registration} />
</Switch>
</Router >
</Router>
</IntlProvider>
);
}

94
src/components/Menu.tsx
View File

@@ -1,56 +1,42 @@
import "./Menu.scss";
import './Menu.scss';
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>
)
}
return (
<section>
<h1>Menu</h1>
<article>
<h2>Starters</h2>
<h3>Chrumky</h3>
<p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
<p>Nuts</p>
<h3>Halusky</h3>
<p>Fatty fat stuff.</p>
<p>Meat, fat</p>
</article>
<article>
<h2>Main dish</h2>
<h3>Chrumky</h3>
<p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
<p>Nuts</p>
<h3>Halusky</h3>
<p>Fatty fat stuff.</p>
<p>Meat, fat</p>
</article>
<article>
<h2>Dessert</h2>
<h3>Chrumky</h3>
<p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
<p>Nuts</p>
<h3>Halusky</h3>
<p>Fatty fat stuff.</p>
<p>Meat, fat</p>
</article>
</section>
);
};

7
src/components/NavBar.scss
View File

@@ -1,5 +1,12 @@
.NavBar {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 1em;
font-size: 2rem;
.Diamond {
margin-right: 1rem;
margin-left: 1rem;
}
}

25
src/components/NavBar.tsx
View File

@@ -1,18 +1,17 @@
import "./NavBar.scss";
import './NavBar.scss';
import { Link } from 'react-router-dom';
import { LanguagePicker } from './LanguagePicker';
import { Button, Menu } from 'antd';
import { Diamond } from './Diamond';
export const NavBar = () => {
return (
<Menu className="NavBar" mode="horizontal">
<Menu.Item><Link to="/menu">Menu</Link></Menu.Item>
<Menu.Item><Link to="/program">Program</Link></Menu.Item>
<Menu.Item><Link to="/program">Info</Link></Menu.Item>
<Menu.Item><Button type="primary">asd</Button></Menu.Item>
<Menu.Item>
<LanguagePicker />
</Menu.Item>
</Menu>
)
}
return (
<div className='NavBar'>
<Link to='/menu'>Menu</Link>
<Diamond />
<Link to='/program'>Program</Link>
<Diamond />
<Link to='/program'>Info</Link>
</div>
);
};

BIN
src/img/main-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 705 KiB

43
src/pages/Main.scss
View File

@@ -1,5 +1,46 @@
@import '../colors.scss';
.Main {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
flex-direction: column;
.Main-container {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid;
border-color: $brown-text;
border-radius: 300px;
width: 48rem;
.logo-container {
margin-top: 3rem;
}
h1 {
line-height: 4rem;
font-family: 'Montserrat-Light';
color: $green-text !important;
font-size: 5rem;
text-transform: uppercase;
margin-bottom: 0px;
}
h2 {
color: $brown-text;
font-size: 3rem;
margin-top: 0em;
margin-bottom: 0em;
}
}
.extraText {
color: $brown-text;
font-size: 1.1rem;
text-transform: uppercase;
margin-bottom: 8px;
letter-spacing: 2px;
}
}

59
src/pages/Main.tsx
View File

@@ -1,22 +1,59 @@
import "./Main.scss";
import './Main.scss';
import { useParams } from "react-router-dom";
import { Link, useParams } from 'react-router-dom';
import { Menu } from '../components/Menu';
import { NavBar } from '../components/NavBar';
import { Program } from '../components/Program';
import { NotFound } from '../components/NotFound';
import { LanguagePicker } from '../components/LanguagePicker';
import { FormattedMessage } from 'react-intl';
import { DateAndPlace } from '../components/DateAndPlace';
interface MainParams {
page: string
page: string;
}
export const Main = () => {
const { page } = useParams<MainParams>()
const { page } = useParams<MainParams>();
return (
<section className="Main">
<NavBar />
{page === "menu" ? <Menu /> : page === "program" ? <Program /> : <NotFound />}
</section>
)
}
return (
<div className='Main'>
<LanguagePicker />
<p className='extraText'>Save the link</p>
<section className='Main-container'>
<article className='logo-container'>
<Link to='/'>
<h1>
<FormattedMessage id='common.lintu' />
</h1>
<h2>
<span> &amp; </span>
</h2>
<h1>
<FormattedMessage id='common.maslo' />
</h1>
</Link>
</article>
<article>
<NavBar />
</article>
{page ? (
<article className='content'>
{page === 'menu' ? (
<Menu />
) : page === 'program' ? (
<Program />
) : (
<NotFound />
)}
</article>
) : (
<article>
<DateAndPlace />
</article>
)}
</section>
<p className='extraText'>Attend the party</p>
</div>
);
};

68
src/pages/Registration.tsx
View File

@@ -1,32 +1,44 @@
import "./Registration.scss";
import './Registration.scss';
import { FormattedMessage } from 'react-intl';
import { RegForm } from '../components/RegForm'
import { RegForm } from '../components/RegForm';
import { RegistrationHeader } from '../components/RegistrationHeader';
import { LanguagePicker } from '../components/LanguagePicker';
export const Registration = () => {
return (
<main className="Registration">
<div className="Registration-main">
<h1><FormattedMessage id="registration.welcome" /><br /><FormattedMessage id="common.datetime" /></h1>
<h2><FormattedMessage id="common.place" /></h2>
</div>
<div className="Registration-desc">
<h2>
<FormattedMessage id="registration.questions" />
</h2>
<h2>
<FormattedMessage id="registration.about" />
</h2>
<h2>
<FormattedMessage id="registration.saveTheLink" />
</h2>
<h2>
<FormattedMessage id="registration.fillInBefore" />
</h2>
</div>
<div className="Registration-form">
<RegForm />
</div>
</main>
)
}
return (
<>
<RegistrationHeader />
<LanguagePicker />
<main className='Registration'>
<div className='Registration-main'>
<h1>
<FormattedMessage id='registration.welcome' />
<br />
<FormattedMessage id='common.datetime' />
</h1>
<h2>
<FormattedMessage id='common.place' />
</h2>
</div>
<div className='Registration-desc'>
<h2>
<FormattedMessage id='registration.questions' />
</h2>
<h2>
<FormattedMessage id='registration.about' />
</h2>
<h2>
<FormattedMessage id='registration.saveTheLink' />
</h2>
<h2>
<FormattedMessage id='registration.fillInBefore' />
</h2>
</div>
<div className='Registration-form'>
<RegForm />
</div>
</main>
</>
);
};