Ajout de la page Flux

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

components/FluxItem.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+export default class FluxItem extends React.Component {
+
+
+	render() {
+		return (
+			<div>
+				<img src={this.props.item.path} alt=""/>
+				<p>
+		<span>By <a href="#!">{this.props.item.pseudo}</a></span>
+					<span>At <a href="#!">{this.props.item.location}</a></span>
+				</p>
+				<style jsx>{`
+					div {
+						width: 94%;
+						display: flex;
+						flex-direction: row;
+						flex-wrap: nowrap;
+						padding: 2%;
+						margin: 2%;
+						border: 1px solid black;
+						border-radius: 8px;
+					}
+					img {
+						max-height: 400px;
+						object-fit: contain;
+						flex-basis: 70%;
+						margin-right: 2%;
+					}
+					img {
+					}
+					span {
+						display: block
+					}
+					p {
+						border-left: 1px dashed black;
+						padding: 2%;
+						width: 30%;
+					}
+				`}</style>
+			</div>
+		)
+	}
+}

components/Layout.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default class Layout extends React.Component {
+	render() {
+		return (
+			<>
+				<nav>
+					<Link href="/" as="/">
+						<a>
+							<img src="/p2.svg" alt=""/>
+						</a>
+					</Link>
+					<Link href="/" as="/">
+						<a>
+							<img src="/txt1.svg" alt=""/>
+						</a>
+					</Link>
+					<ul>
+						<li>L'application</li>
+						<li>
+							<Link href="/flux" as="/flux">
+								<a>
+									La randonnée
+								</a>
+							</Link>
+						</li>
+						<li>Contact</li>
+						<li><button>Télécharger</button></li>
+					</ul>
+				</nav>
+				{this.props.children}
+				<footer>
+					<div>
+						Politique de confidencialité
+					</div>
+					<div>
+						Conditions d'utilisations du service
+					</div>
+				</footer>
+				<style jsx>{`
+					nav {
+						position: fixed;
+						width: 100%;
+						top: 0;
+						background: white;
+						display: flex;
+						z-index: 1001;
+						height: 50px;
+					}
+					a {
+						display: inline;
+					}
+					img {
+						display: inline;
+						padding: 5px;
+						height: 50px;
+					}
+					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-right: 15px;
+						padding: 10px
+					}
+					nav ul li button {
+						background: #3CB992;
+						color: white;
+						border-radius: 10px;
+						padding: 5px 10px;
+						border: none;
+						margin: 0;
+					}
+					footer {
+						background: #3CB992;
+						padding: 20px;
+						font-weight: 500;
+						display: flex;
+						justify-content: space-evenly;
+						color: white;
+						text-align: center;
+					}
+				`}</style>
+
+			</>
+		)
+	}
+}

components/nav.js

@@ -1,56 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-const links = [
-  { href: 'https://zeit.co/now', label: 'ZEIT' },
-  { href: 'https://github.com/zeit/next.js', label: 'GitHub' },
-].map(link => {
-  link.key = `nav-link-${link.href}-${link.label}`
-  return link
-})
-
-const Nav = () => (
-  <nav>
-    <ul>
-      <li>
-        <Link href="/">
-          <a>Home</a>
-        </Link>
-      </li>
-      {links.map(({ key, href, label }) => (
-        <li key={key}>
-          <a href={href}>{label}</a>
-        </li>
-      ))}
-    </ul>
-
-    <style jsx>{`
-      :global(body) {
-        margin: 0;
-        font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
-          Helvetica, sans-serif;
-      }
-      nav {
-        text-align: center;
-      }
-      ul {
-        display: flex;
-        justify-content: space-between;
-      }
-      nav > ul {
-        padding: 4px 16px;
-      }
-      li {
-        display: flex;
-        padding: 6px 8px;
-      }
-      a {
-        color: #067df7;
-        text-decoration: none;
-        font-size: 13px;
-      }
-    `}</style>
-  </nav>
-)
-
-export default Nav