input Upload

src/components/inputUplaod/inputUpload.tsx

@@ -0,0 +1,50 @@
+import React,{ useState, useEffect } from 'react'
+
+import { InputUploadView } from './inputUploadView'
+
+
+export default function InputUpload() {
+  const [images, setImages] = useState([] as any);
+  const [imageURLS, setImageURLs] = useState([]);
+
+  useEffect(() => {
+    if (images.length < 1) return;
+    const newImageUrls: any = [];
+    images.forEach((image:any) => newImageUrls.push(URL.createObjectURL(image)));
+    setImageURLs(newImageUrls);
+  }, [images]);
+
+  function onImageChange(e: any) {
+    setImages([...e.target.files]);
+    console.log(e);
+  }
+
+
+
+
+  return (
+    <InputUploadView>
+
+<div className='imgContainer'>
+        <article>
+     {imageURLS.map((imageSrc) => (
+          <img  className="image" src={imageSrc} alt="not fount"  />
+        ))}
+
+       </article>
+
+
+    </div>
+
+        <div className="update">
+        <form action="">
+          <div >
+            <label  htmlFor="arquivo"> <p className='TitleButton'> Enviar foto de Perfil </p>   </label>
+            <input  type="file" name='arquivo' id='arquivo' onChange={onImageChange} />
+          </div>
+        </form>
+      </div>
+
+    </InputUploadView>
+  )
+}

src/components/inputUplaod/inputUploadView.ts

@@ -0,0 +1,57 @@
+import styled from 'styled-components'
+
+export const InputUploadView = styled.button`
+  width: 350px;
+  margin-left: 63px;
+  height: 58px;
+
+  border-radius: 5px;
+  background-color: #fff;
+  border: 1px solid #adacac;
+
+
+  margin-top: 13px;
+
+.imgContainer{
+  max-width: 40px;
+  height: 30px;
+}
+
+  input[type="file"] {
+    display: none;
+
+  }
+  label {
+    width: 169px;
+    height: 30px;
+    border-radius: 4px;
+    background-color: #254F7F;
+    color: white;
+    margin-left: 3px;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    display: flex;
+    text-align: center;
+    cursor: pointer;
+  }
+  .image{
+    width:30px;
+  }
+
+  .text{
+    margin-left: 60px;
+  }
+  .update{
+    margin-left: 160px;
+    margin-top: -29px;
+  }
+  .TitleButton{
+    margin-left: 9px;
+    margin-top: 6px;
+    font-family: 'Poppins';
+  }
+
+
+
+`

src/pages/administrative/clients.tsx

@@ -13,6 +13,9 @@ import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
 import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
 import ClientsTable from '../../components/administrativeTables/ClientsTable';
 import Header from '../../components/header/Header'
+import { IconButton } from '@mui/material';
+import InputUpload from '../../components/inputUplaod/inputUpload'
+
 
 
 const style = {
@@ -41,6 +44,8 @@ export default function clients() {
 
 
 
+
+
   return (
     <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
       <ClientsView>
@@ -67,7 +72,12 @@ export default function clients() {
          <TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} variant="outlined" />
          <TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} variant="outlined" />
          <TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} variant="outlined" />
-         <TextField id="outlined-basic" label="Imagem/Logotipo" sx={{width:350, ml:8, mt:2}} variant="outlined" />
+         <InputUpload />
+
+
+
+
+
           <br /><br />
         <FaqButton1  title='Cancelar' onClick={()=>console.log()} />
         <FaqButton2  title='Salvar' onClick={()=>console.log()}/>