navbar buttons change page content
This commit is contained in:
parent
7d034800d6
commit
ac3957fa13
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import ImagesWithDescription from './ImagesWithDescription';
|
||||
|
||||
/**
|
||||
* @return {jsx} The homepage component
|
||||
*/
|
||||
export default function About() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ImagesWithDescription
|
||||
images={[
|
||||
{
|
||||
image: 'urbex.webp',
|
||||
title: 'Explorations',
|
||||
description: `Amateurs d'escalade et de sensations
|
||||
fortes, nous cherchons des lieux abandonnés ou
|
||||
difficiles d'accès.`,
|
||||
}, {
|
||||
image: 'cliff.jpeg',
|
||||
title: 'Découvertes',
|
||||
description: 'De beaux paysages, tu connais.',
|
||||
}, {
|
||||
image: 'eye.webp',
|
||||
title: 'Rencontres',
|
||||
description: `Notre voyage sera avant tout rythmé de
|
||||
nouveaux visages. Sans personne pour nous aider
|
||||
ce voyage aurait peu de sens.`,
|
||||
},
|
||||
]}/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import Banner from './Banner';
|
||||
|
||||
/**
|
||||
* @return {jsx} The homepage component
|
||||
*/
|
||||
export default function Blog() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Banner
|
||||
title={`Un voyage à travers l'Europe`}
|
||||
description={`
|
||||
On vous raconte nos aventures à travers l'Europe.\n
|
||||
Nous voyageons en stop et sans argent.\n
|
||||
On loge chez l'habitant ou dehors dans des hamacs.`}
|
||||
links={[
|
||||
{
|
||||
to: '/blog',
|
||||
text: 'Notre carnet de voyage',
|
||||
},
|
||||
]}
|
||||
image={'map.jpeg'}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
import Quote from './Quote';
|
||||
|
||||
/**
|
||||
* @return {jsx} The homepage component
|
||||
*/
|
||||
export default function Contact() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Quote
|
||||
quote={'Not all those who wander are lost.'}
|
||||
author={'J. R. R. Tolkien'}
|
||||
description={`
|
||||
On veut quitter notre confort pendant un moment.
|
||||
Briser nos habitudes et nos ancrages.
|
||||
Faire place à la nouveauté et l'incompréhension.`}/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import React from 'react';
|
||||
import Banner from './Banner';
|
||||
import Quote from './Quote';
|
||||
import Footer from './Footer';
|
||||
import ImagesWithDescription from './ImagesWithDescription';
|
||||
|
||||
/**
|
||||
* @return {jsx} The homepage component
|
||||
*/
|
||||
export default function Home() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Banner
|
||||
title={`Un voyage à travers l'Europe`}
|
||||
description={`
|
||||
On vous raconte nos aventures à travers l'Europe.\n
|
||||
Nous voyageons en stop et sans argent.\n
|
||||
On loge chez l'habitant ou dehors dans des hamacs.`}
|
||||
links={[
|
||||
{
|
||||
to: '/blog',
|
||||
text: 'Notre carnet de voyage',
|
||||
},
|
||||
]}
|
||||
image={'map.jpeg'}
|
||||
/>
|
||||
<ImagesWithDescription
|
||||
images={[
|
||||
{
|
||||
image: 'urbex.webp',
|
||||
title: 'Explorations',
|
||||
description: `Amateurs d'escalade et de sensations
|
||||
fortes, nous cherchons des lieux abandonnés ou
|
||||
difficiles d'accès.`,
|
||||
}, {
|
||||
image: 'cliff.jpeg',
|
||||
title: 'Découvertes',
|
||||
description: 'De beaux paysages, tu connais.',
|
||||
}, {
|
||||
image: 'eye.webp',
|
||||
title: 'Rencontres',
|
||||
description: `Notre voyage sera avant tout rythmé de
|
||||
nouveaux visages. Sans personne pour nous aider
|
||||
ce voyage aurait peu de sens.`,
|
||||
},
|
||||
]}/>
|
||||
<Quote
|
||||
quote={'Not all those who wander are lost.'}
|
||||
author={'J. R. R. Tolkien'}
|
||||
description={`
|
||||
On veut quitter notre confort pendant un moment.
|
||||
Briser nos habitudes et nos ancrages.
|
||||
Faire place à la nouveauté et l'incompréhension.`}/>
|
||||
<Footer
|
||||
elements={[
|
||||
{
|
||||
title: 'À propos',
|
||||
description: `Nous sommes deux jeunes de 23 ans à la
|
||||
recherche d'aventures et de réponses à travers
|
||||
l'Europe`,
|
||||
links: [
|
||||
{
|
||||
to: '/about',
|
||||
text: 'Plus de détails',
|
||||
},
|
||||
],
|
||||
}, {
|
||||
title: 'Nous contacter',
|
||||
description:
|
||||
<ul>
|
||||
<li>curious.roamers@gmail.com</li>
|
||||
<li>06 37 11 28 22</li>
|
||||
</ul>,
|
||||
links: [
|
||||
{
|
||||
to: '/contact',
|
||||
text: `Autres façons de nous contacter`,
|
||||
},
|
||||
],
|
||||
}, {
|
||||
title: 'Donation',
|
||||
description: `Si vous voulez contribuer à financer nos
|
||||
futurs voyages ou simplement nous aider financièrement
|
||||
:)`,
|
||||
links: [
|
||||
{
|
||||
to: 'https://paypal.me/ygarrot',
|
||||
text: 'Paypal',
|
||||
}, {
|
||||
to: 'https://tipeee.com/curious-roamers',
|
||||
text: 'Tipeee',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
import React from 'react';
|
||||
|
||||
interface Link {
|
||||
to: string;
|
||||
status: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface NavbarProps {
|
||||
setStatus: any;
|
||||
main: Link;
|
||||
sub: Array<Link>;
|
||||
}
|
||||
|
|
@ -13,14 +14,16 @@ interface NavbarProps {
|
|||
/**
|
||||
* @return {jsx} The root component
|
||||
*/
|
||||
export default function Navbar({main, sub}: NavbarProps) {
|
||||
export default function Navbar({setStatus, main, sub}: NavbarProps) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className='navbar navbar-expand-lg navbar-light'>
|
||||
<div
|
||||
className='container'
|
||||
id='navbar'>
|
||||
<a className='navbar-brand' href={main.to}>{main.text}</a>
|
||||
<a
|
||||
className='navbar-brand'
|
||||
onClick={() => setStatus(main.status)}>{main.text}</a>
|
||||
<button
|
||||
className='navbar-toggler'
|
||||
type='button'
|
||||
|
|
@ -33,7 +36,9 @@ export default function Navbar({main, sub}: NavbarProps) {
|
|||
<ul className='navbar-nav mr-auto mb-0 pb-0'>
|
||||
{sub.map((elem, index) =>
|
||||
<li key={index} className='nav-item'>
|
||||
<a className='nav-link' href={elem.to}>
|
||||
<a
|
||||
className='nav-link'
|
||||
onClick={() => setStatus(elem.status)}>
|
||||
{elem.text}
|
||||
</a>
|
||||
</li>)
|
||||
|
|
|
|||
|
|
@ -1,120 +1,54 @@
|
|||
import React from 'react';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import Navbar from './Navbar';
|
||||
import Banner from './Banner';
|
||||
import Quote from './Quote';
|
||||
import Footer from './Footer';
|
||||
import ImagesWithDescription from './ImagesWithDescription';
|
||||
import Home from './Home';
|
||||
import Blog from './Blog';
|
||||
import About from './About';
|
||||
import Contact from './Contact';
|
||||
|
||||
/**
|
||||
* @return {jsx} The root component
|
||||
*/
|
||||
export default function Root() {
|
||||
const [page, setPage] = useState(<Home />);
|
||||
const [navbarStatus, setNavbarStatus] = useState('Home');
|
||||
|
||||
useEffect(() => {
|
||||
if (navbarStatus == 'Home') {
|
||||
setPage(<Home />);
|
||||
} else if (navbarStatus == 'Blog') {
|
||||
setPage(<Blog />);
|
||||
} else if (navbarStatus == 'About') {
|
||||
setPage(<About />);
|
||||
} else if (navbarStatus == 'Contact') {
|
||||
setPage(<Contact />);
|
||||
}
|
||||
}, [navbarStatus]);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Navbar
|
||||
setStatus={setNavbarStatus}
|
||||
main={{
|
||||
text: 'Curious Roamers',
|
||||
to: '/blog',
|
||||
status: 'Home',
|
||||
}}
|
||||
sub={[
|
||||
{
|
||||
text: 'Home',
|
||||
to: '/',
|
||||
status: 'Home',
|
||||
}, {
|
||||
text: 'Carnet de voyage',
|
||||
to: '/blog',
|
||||
status: 'Blog',
|
||||
}, {
|
||||
text: 'Qui sommes nous ?',
|
||||
to: '/about',
|
||||
status: 'About',
|
||||
}, {
|
||||
text: 'Contact',
|
||||
to: '/contact',
|
||||
status: 'Contact',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Banner
|
||||
title={`Un voyage à travers l'Europe`}
|
||||
description={`
|
||||
On vous raconte nos aventures à travers l'Europe.\n
|
||||
Nous voyageons en stop et sans argent.\n
|
||||
On loge chez l'habitant ou dehors dans des hamacs.`}
|
||||
links={[
|
||||
{
|
||||
to: '/blog',
|
||||
text: 'Notre carnet de voyage',
|
||||
},
|
||||
]}
|
||||
image={'map.jpeg'}
|
||||
/>
|
||||
<ImagesWithDescription
|
||||
images={[
|
||||
{
|
||||
image: 'urbex.webp',
|
||||
title: 'Explorations',
|
||||
description: `Amateurs d'escalade et de sensations
|
||||
fortes, nous cherchons des lieux abandonnés ou
|
||||
difficiles d'accès.`,
|
||||
}, {
|
||||
image: 'cliff.jpeg',
|
||||
title: 'Découvertes',
|
||||
description: 'De beaux paysages, tu connais.',
|
||||
}, {
|
||||
image: 'eye.webp',
|
||||
title: 'Rencontres',
|
||||
description: `Notre voyage sera avant tout rythmé de
|
||||
nouveaux visages. Sans personne pour nous aider
|
||||
ce voyage aurait peu de sens.`,
|
||||
},
|
||||
]}/>
|
||||
<Quote
|
||||
quote={'Not all those who wander are lost.'}
|
||||
author={'J. R. R. Tolkien'}
|
||||
description={`
|
||||
On veut quitter notre confort pendant un moment.
|
||||
Briser nos habitudes et nos ancrages.
|
||||
Faire place à la nouveauté et l'incompréhension.`}/>
|
||||
<Footer
|
||||
elements={[
|
||||
{
|
||||
title: 'À propos',
|
||||
description: `Nous sommes deux jeunes de 23 ans à la
|
||||
recherche d'aventures et de réponses à travers
|
||||
l'Europe`,
|
||||
links: [
|
||||
{
|
||||
to: '/about',
|
||||
text: 'Plus de détails',
|
||||
},
|
||||
],
|
||||
}, {
|
||||
title: 'Nous contacter',
|
||||
description:
|
||||
<ul>
|
||||
<li>curious.roamers@gmail.com</li>
|
||||
<li>06 37 11 28 22</li>
|
||||
</ul>,
|
||||
links: [
|
||||
{
|
||||
to: '/contact',
|
||||
text: `Autres façons de nous contacter`,
|
||||
},
|
||||
],
|
||||
}, {
|
||||
title: 'Donation',
|
||||
description: `Si vous voulez contribuer à financer nos
|
||||
futurs voyages ou simplement nous aider financièrement
|
||||
:)`,
|
||||
links: [
|
||||
{
|
||||
to: 'https://paypal.me/ygarrot',
|
||||
text: 'Paypal',
|
||||
}, {
|
||||
to: 'https://tipeee.com/curious-roamers',
|
||||
text: 'Tipeee',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}/>
|
||||
{page}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue