Ajout de la page Flux

Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
2020-04-28 16:58:20 +02:00
parent 9a2337945e
commit 215383a526
9 changed files with 1674 additions and 1895 deletions

15
pages/_app.jsx Normal file
View File

@ -0,0 +1,15 @@
import App from 'next/app'
import '../style.css'
import Layout from '../components/Layout'
export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
}

241
pages/flux.jsx Normal file
View File

@ -0,0 +1,241 @@
import React from 'react'
import FluxItem from '../components/FluxItem'
const fakeData = [{
pseudo: 'Avior',
path: '/baniere@2x.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/photo-filtre.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/Rectangle 6.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},]
export default class Flux extends React.Component {
static getInitialProps(ctx) {
return {data: fakeData}
}
render() {
return (
<div>
{this.props.data.map((el, index) => (
<FluxItem key={index} item={el} />
))}
</div>
)
}
}

View File

@ -1,19 +1,7 @@
import React from 'react'
import Head from 'next/head'
import Nav from '../components/nav'
const Home = () => (
<div>
<nav>
<img src="/p2.svg" alt=""/>
<img src="/txt1.svg" alt=""/>
<ul>
<li>L'application</li>
<li>La randonnée</li>
<li>Contact</li>
<li className="download">Télécharger</li>
</ul>
</nav>
<>
<header>
<div className="headline">
<img src="/phone.png" alt=""/>
@ -57,28 +45,6 @@ const Home = () => (
<img src="/google-play.svg" alt=""/>
</div>
</div>
<footer>
<div className="els black">
<div className="el">
Politique de confidencialité
</div>
<div className="el">
Conditions d'utilisations du service
</div>
</div>
</footer>
<style jsx global>{`
html, body {
padding: 0;
margin:0;
}
body {
margin-top: 70px;
}
`}</style>
<style jsx>{`
.black {
background: #3CB992;
@ -91,38 +57,6 @@ const Home = () => (
.green {
display: inline-block;
}
nav {
position: fixed;
width: 96%;
padding: 2%;
top: 0;
background: white;
display: flex;
z-index: 1001;
}
nav img {
height: 60px;
}
nav ul {
margin: 0;
padding: 0;
width: 100%;
display: inline-flex;
justify-content: flex-end;
list-style: none;
}
nav ul li {
line-height: 2;
padding: 15px;
}
nav ul li.download {
background: #3CB992;
color: white;
border-radius: 10px;
padding: 7px 10px;
margin: 5px;
}
button {
border-radius: 10px;
padding: 7px 10px;
@ -228,7 +162,7 @@ const Home = () => (
}
`}</style>
</div>
</>
)
export default Home