From 338db250e153e3731c8a462fd5ffb4524710ca38 Mon Sep 17 00:00:00 2001
From: gbrochar <gaetanbrochard@protonmail.com>
Date: Sun, 29 Nov 2020 18:58:41 +0100
Subject: [PATCH] Quote and Footer

---
 package.json                         |  2 +-
 src/client/Footer.tsx                | 48 ++++++++++++++++++++++++++++
 src/client/ImagesWithDescription.tsx |  2 +-
 src/client/Quote.tsx                 | 35 ++++++++++++++++++++
 src/client/Root.tsx                  | 14 ++++----
 5 files changed, 92 insertions(+), 9 deletions(-)
 create mode 100644 src/client/Footer.tsx
 create mode 100644 src/client/Quote.tsx

diff --git a/package.json b/package.json
index e1f3712..dfad8c3 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "dev:client:js": "webpack --config config/webpack.client.dev.js",
     "dev:client": "concurrently \"npm:dev:client:types\" \"npm:dev:client:js\"",
     "dev:start": "mkdir -p dist/server && touch dist/server/bundle.js && nodemon dist/server/bundle.js",
-    "dev": "rm -rf dist && concurrently \"npm:dev:server\" \"npm:dev:client\" \"npm:dev:start\"",
+    "dev": "concurrently \"npm:dev:server\" \"npm:dev:client\" \"npm:dev:start\"",
     "start": "node dist/server/bundle.js"
   },
   "author": "gbrochar",
diff --git a/src/client/Footer.tsx b/src/client/Footer.tsx
new file mode 100644
index 0000000..4d934a6
--- /dev/null
+++ b/src/client/Footer.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface Link {
+	to: string;
+	text: string;
+}
+
+interface Card {
+	title: string;
+	description: string;
+	links: Array<Link>;
+}
+
+interface FooterProps {
+    elements: Array<Card>;
+}
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Footer(
+	{elements}: FooterProps) {
+	return (
+		<React.Fragment>
+			<div className='container w-50 py-5 d-flex justify-content-between'>
+				{elements.map((elem, index) =>
+					<div
+						key={index}
+						id='imagewithdescription'
+						className='align-top'>
+						<h3 className='font-weight-bold'>
+							{elem.title}
+						</h3>
+						<p
+							dangerouslySetInnerHTML=
+								{{__html: elem.description}}></p>
+						{elem.links.map((link, i) =>
+							<div key={i}>
+								<a href={link.to}>
+									{link.text}
+								</a>
+								<br/>
+							</div>)}
+					</div>)}
+			</div>
+		</React.Fragment>
+	);
+}
diff --git a/src/client/ImagesWithDescription.tsx b/src/client/ImagesWithDescription.tsx
index c0c8ffc..90cf0db 100644
--- a/src/client/ImagesWithDescription.tsx
+++ b/src/client/ImagesWithDescription.tsx
@@ -17,7 +17,7 @@ export default function ImagesWithDescription(
 	{images}: imagesWithDescriptionProps) {
 	return (
 		<React.Fragment>
-			<div className='container w-50 d-flex justify-content-between'>
+			<div className='container w-50 py-5 d-flex justify-content-between'>
 				{images.map((elem, index) =>
 					<div
 						key={index}
diff --git a/src/client/Quote.tsx b/src/client/Quote.tsx
new file mode 100644
index 0000000..2dcdb60
--- /dev/null
+++ b/src/client/Quote.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface QuoteProps {
+	quote: string;
+	author: string;
+	description: string;
+}
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Quote(
+	{quote, author, description}: QuoteProps) {
+	const containerStyle = {
+		backgroundColor: '#f7f7f7',
+	};
+
+	return (
+		<React.Fragment>
+			<div
+				className='container-fluid p-5'
+				style={containerStyle}>
+				<div
+					className='container
+						w-75 d-flex justify-content-center align-items-center'>
+					<blockquote className="blockquote mx-5">
+						<p className="mb-0">{quote}</p>
+						<footer className="blockquote-footer">{author}</footer>
+					</blockquote>
+					<div className='lead w-25 mx-5'>{description}</div>
+				</div>
+			</div>
+		</React.Fragment>
+	);
+}
diff --git a/src/client/Root.tsx b/src/client/Root.tsx
index 9770e79..d969e57 100644
--- a/src/client/Root.tsx
+++ b/src/client/Root.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import Navbar from './Navbar';
 import Banner from './Banner';
+import Quote from './Quote';
+import Footer from './Footer';
 import ImagesWithDescription from './ImagesWithDescription';
 
 /**
@@ -64,8 +66,7 @@ export default function Root() {
 							ce voyage aurait peu de sens.`,
 					},
 				]}/>
-			{/* eslint-disable */}
-			{/* <Quote
+			<Quote
 				quote={'Not all those who wander are lost.'}
 				author={'J. R. R. Tolkien'}
 				description={`
@@ -94,7 +95,7 @@ export default function Root() {
 						</ul>`,
 						links: [
 							{
-								to: '/contant',
+								to: '/contact',
 								text: `Autres façons de nous contacter`,
 							},
 						],
@@ -105,16 +106,15 @@ export default function Root() {
 						:)`,
 						links: [
 							{
-								to: 'paypal.me/ygarrot',
+								to: 'https://paypal.me/ygarrot',
 								text: 'Paypal',
 							}, {
-								to: 'tipeee.com/curious-roamers',
+								to: 'https://tipeee.com/curious-roamers',
 								text: 'Tipeee',
 							},
 						],
 					},
-				]}/> */}
-				{/* eslint-enable */}
+				]}/>
 		</React.Fragment>
 	);
 }