ajout de la gestion de la pdp sur a page de profile ⚡

.gitignore

@@ -41,4 +41,8 @@ bower_components
 
 psd
 thumb
-sketch
+sketch
+
+### modules ###
+yarn.lock
+package-lock.json

cryptide_project/src/Components/ProfilePDP.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import '../Pages/Profile.css'
+import dl from '../res/icon/download.png'
+import defaultImg from '../res/img/Person.png'
+
+const ProfilePDP = () => {
+    const [selectedFile, setSelectedFile] = useState(null);
+
+    // @ts-ignore
+    const handleFileChange = (event) => {
+        let file = event.target.files[0];
+        // Validez la taille, le format, etc.
+        // if (file == null){
+        //     file = defaultImg;
+        // }
+        setSelectedFile(file);
+    };
+
+    return (
+        <div className='mainPDPContainer'>
+                {selectedFile && (
+                    <div >
+                    {/* @ts-ignore */}
+                    {/* <p>Selected File: {selectedFile.name}</p> */}
+                    <img src={URL.createObjectURL(selectedFile)} alt="Preview" className='imgContainer' width='100px' height='100px' />
+                    </div>
+                )}
+                <div className="parent">
+                    <div className="file-upload">
+                        <img src={dl} alt="upload" width='25px' height='25px'/>
+                        {/* <h6>Cliquer ici pour ajouter une image</h6> */}
+                        <p>Taille recommandée : 100px</p>
+                        <input type="file" accept="image/*" onChange={handleFileChange}/>
+                    </div>
+                </div>
+                {/* <input type="file" accept="image/*" onChange={handleFileChange} /> */}
+            </div>
+    );
+};
+
+export default ProfilePDP;

cryptide_project/src/Pages/Profile.css

@@ -0,0 +1,63 @@
+.mainContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 50px;
+}
+
+.mainPDPContainer{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid whitesmoke;
+    border-radius: 15px;
+
+    background-color: white;
+
+    margin: 10px;
+}
+
+.imgContainer{
+    border: 5px solid black;
+    border-radius: 50px;
+    margin: 15px;
+}
+
+
+
+/*File upload*/
+.parent {
+    /* width: 250px; */
+    /* margin: auto; */
+    margin: 2rem;
+    background: #ffffff;
+    border-radius: 25px;
+    /* box-shadow: 7px 20px 20px rgb(210, 227, 244); */
+}
+.file-upload {
+    text-align: center;
+    border: 3px dashed rgb(210, 227, 244);
+    /* padding: 1.5rem; */
+    position: relative;
+    cursor: pointer;
+    max-width: 100px;
+    max-height: 50px;
+}
+.file-upload p {
+    font-size: 0.5rem;
+    /* margin-top: 10px; */
+    color: #bbcada;
+}
+.file-upload input {
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    cursor: pointer;
+}

cryptide_project/src/Pages/Profile.tsx

@@ -1,25 +1,12 @@
 import React, { useState } from 'react';
+import ProfilePDP from '../Components/ProfilePDP';
 
-const ProfilePictureUploader = () => {
+import './Profile.css'
-  const [selectedFile, setSelectedFile] = useState(null);
-
-  // @ts-ignore
-  const handleFileChange = (event) => {
-    const file = event.target.files[0];
-    // Validez la taille, le format, etc.
-    setSelectedFile(file);
-  };
 
+const ProfilePictureUploader = () => {
   return (
-    <div>
+    <div className='mainContainer'>
-      <input type="file" accept="image/*" onChange={handleFileChange} />
+      <ProfilePDP/>
-      {selectedFile && (
-        <div>
-          {/* @ts-ignore */}
-          <p>Selected File: {selectedFile.name}</p>
-          <img src={URL.createObjectURL(selectedFile)} alt="Preview" />
-        </div>
-      )}
     </div>
   );
 };