75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import './Main.scss';
|
|
|
|
import { Link, useParams, useLocation } 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';
|
|
import { Info } from '../components/Info';
|
|
import { getLangFromSearch } from './utils';
|
|
import { useSetRecoilState } from 'recoil';
|
|
import { currentLanguage } from '../atoms/language';
|
|
|
|
interface MainParams {
|
|
page: string;
|
|
}
|
|
|
|
export const Main = () => {
|
|
const { page } = useParams<MainParams>();
|
|
const { search } = useLocation();
|
|
const setlang = useSetRecoilState(currentLanguage);
|
|
|
|
const lang = getLangFromSearch(search);
|
|
if (lang != '') setlang(lang);
|
|
|
|
return (
|
|
<div className='Main'>
|
|
<LanguagePicker />
|
|
<p className='extraText'>
|
|
<FormattedMessage id='main.saveTheLink' />
|
|
</p>
|
|
<section className='Main-container'>
|
|
<article className='logo-container'>
|
|
<Link to='/'>
|
|
<h1 className='Main-title'>
|
|
<FormattedMessage id='common.lintu' />
|
|
</h1>
|
|
<h2 className='Main-and'>
|
|
<span> & </span>
|
|
</h2>
|
|
<h1 className='Main-title'>
|
|
<FormattedMessage id='common.maslo' />
|
|
</h1>
|
|
</Link>
|
|
</article>
|
|
<article>
|
|
<NavBar />
|
|
</article>
|
|
{page ? (
|
|
<article className='content'>
|
|
{page === 'menu' ? (
|
|
<Menu />
|
|
) : page === 'program' ? (
|
|
<Program />
|
|
) : page === 'info' ? (
|
|
<Info />
|
|
) : (
|
|
<NotFound />
|
|
)}
|
|
</article>
|
|
) : (
|
|
<article>
|
|
<DateAndPlace size='large' />
|
|
</article>
|
|
)}
|
|
</section>
|
|
<p className='extraText'>
|
|
<FormattedMessage id='main.welcome' />
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|