From 5ee856f49c80dcb30e404119dbb85867c94d8365 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Tue, 7 Nov 2023 16:26:01 +0100
Subject: [PATCH] ajout du component ButtonImgNav :zap:

---
 .../src/Components/ButtonImgNav.css             | 12 ++++++++++++
 .../src/Components/ButtonImgNav.tsx             | 17 +++++++++++++++++
 cryptide_project/src/Pages/Play.css             |  1 -
 cryptide_project/src/Pages/Play.tsx             | 13 +++++++++----
 4 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 cryptide_project/src/Components/ButtonImgNav.css
 create mode 100644 cryptide_project/src/Components/ButtonImgNav.tsx

diff --git a/cryptide_project/src/Components/ButtonImgNav.css b/cryptide_project/src/Components/ButtonImgNav.css
new file mode 100644
index 0000000..b2b4a04
--- /dev/null
+++ b/cryptide_project/src/Components/ButtonImgNav.css
@@ -0,0 +1,12 @@
+.buttonNabImg{
+    margin: 15px 0;
+    width: auto;
+    height: 8vh;
+
+    background-color: #85C9C2;
+    color: #2A4541;
+    border-radius: 15px;
+    border-width: 0;
+
+    font-size:larger;
+}
\ No newline at end of file
diff --git a/cryptide_project/src/Components/ButtonImgNav.tsx b/cryptide_project/src/Components/ButtonImgNav.tsx
new file mode 100644
index 0000000..033d103
--- /dev/null
+++ b/cryptide_project/src/Components/ButtonImgNav.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './ButtonImgNav.css';
+import { FormattedMessage } from 'react-intl';
+
+//@ts-ignore
+function ButtonImgNav({ dest, img }) {
+    return (
+    <Link to={dest}>
+        <button className='buttonNabImg'>
+            <img src={img} alt="Button Image" />
+        </button>
+    </Link>
+    );
+}
+
+export default ButtonImgNav;
diff --git a/cryptide_project/src/Pages/Play.css b/cryptide_project/src/Pages/Play.css
index 4bc43b3..5f736f4 100644
--- a/cryptide_project/src/Pages/Play.css
+++ b/cryptide_project/src/Pages/Play.css
@@ -78,7 +78,6 @@
     margin: 15px 0;
     width:200px;
     height: 8vh;
-    
 
     background-color: #85C9C2;
     color: #2A4541;
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index 5af5872..ee26f68 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/cryptide_project/src/Pages/Play.tsx
@@ -3,15 +3,19 @@ import './Play.css';
 
 import Person from '../res/img/Person.png';
 import { Link } from 'react-router-dom';
+import ButtonImgNav from "../Components/ButtonImgNav"
+import param from '../res/icon/param.png';
+import share from '../res/icon/share.png';
 
 function Play() {
     return (
 
         <div className="MainContainer">
             <div className="leftContainer">
-                <button className='ButtonNav'>
+                {/* <button className='ButtonNav'>
                     Param
-                </button>
+                </button> */}
+                <ButtonImgNav dest='/' img={param}/>
             </div>
             <div className="MidContainer">
                 <div>
@@ -59,9 +63,10 @@ function Play() {
                             </h4>
                         </div>
                     </div>
-                    <button className='ButtonNav'>
+                    {/* <button className='ButtonNav'>
                         Share
-                    </button>
+                    </button> */}
+                    <ButtonImgNav dest='/' img={share}/>
                 </div>
             </div>
         </div>