Icones acessibilidade

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -1,9 +1,27 @@
 import React from "react";
 import InputMask from "react-input-mask";
 import "./style/formagendamentos.css";
+import { useState } from "react";
+
 
 const FormNovaConsulta = ({ onCancel }) => {
   
+  const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
+  const handleclickAcessibilidade = (id) => {
+    let resultado = acessibilidade[id]
+
+    if(resultado === false){ setAcessibilidade({...acessibilidade, [id]:true}); console.log('mudou')}
+
+    else if(resultado === true){ setAcessibilidade({...acessibilidade, [id]:false})}
+
+    
+
+    
+
+    console.log(id)
+
+  }
+
   const BuscarCPFnoBancodeDados = (cpf) => {
 
       var myHeaders = new Headers();
@@ -112,7 +130,35 @@ fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requ
 
         <h2 className="section-title">Informações do atendimento</h2>
        
+      
+          <div className="icons-container">
+      
+        <div  className={`icons-div ${ acessibilidade.cadeirante === true ? 'acessibilidade-ativado' : ''} `} id='cadeirante' onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
+          
+          <span className="material-symbols-outlined icon">accessible</span>
+        </div>
+
+         <div className={`icons-div ${acessibilidade.idoso === true ? 'acessibilidade-ativado' : ''}`} id="idoso" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
+          <span className="material-symbols-outlined icon">elderly</span> 
+        </div>
+       
+        <div className={`icons-div ${acessibilidade.gravida === true ? 'acessibilidade-ativado' : ''}`} id="gravida" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
+          <span className="material-symbols-outlined icon">pregnant_woman</span> 
+        </div>
+        
+        <div className={`icons-div ${acessibilidade.bebe === true ? 'acessibilidade-ativado' : ''}`} id="bebe" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-baby-icon lucide-baby"><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"/><path d="M15 12h.01"/><path d="M19.38 6.813A9 9 0 0 1 20.8 10.2a2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"/><path d="M9 12h.01"/></svg>
+
+        </div>
+
+        <div className={`icons-div ${acessibilidade.autista === true ? 'acessibilidade-ativado' : ''}`} id="autista" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
+         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
+        </div>
+        
+       </div>
+
         <div className="campo-informacoes-atendimento">
+            
             <div className="campo-de-input">
               <label>Nome do profissional *</label>
               <input type="text" name="profissional" required />
@@ -168,19 +214,15 @@ fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requ
           </div>
       </section>
 
-       <div className="icons-container">
+      <section className="informacoes-atendimento-segunda-linha-direita"> 
-      <span className="material-symbols-outlined icon">accessible</span>
+     
-      <span className="material-symbols-outlined icon">elderly</span>
-      <span className="material-symbols-outlined icon">pregnant_woman</span>
-      <span className="material-symbols-outlined icon">child_care</span>
-      <span className="material-symbols-outlined icon">accessibility_new</span>
-    </div>
 
         <div className="campo-de-input">
           <label>Observações</label>
           <textarea name="observacoes" rows="4" cols="1"></textarea>
         </div>
       </section>
+    </section>
 
       <div className="form-actions">
         <button type="submit" className="btn-primary">Salvar agendamento</button>

src/components/AgendarConsulta/style/formagendamentos.css

@@ -3,23 +3,50 @@
 .icons-container {
   display: flex;
   gap: 10px;
+  justify-content: flex-end;
+  margin-bottom: -7px;
 }
 
-.icon {
+.acessibilidade-ativado{
-  font-family: 'Material Symbols Outlined';
+  background-color: #1e3a8a;
-  font-size: 36px;
+  border: none;
-  padding: 12px;
+}
-  border: 1px solid #d1d5db;
+.acessibilidade-ativado svg, .acessibilidade-ativado .icon{
-  border-radius: 12px;
+  color: white;
+}
+
+
+.icons-div{
+  border: 1px solid #607080;
+  padding: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 56px;
+  height: 40px;
-  height: 56px;
+  width: 40px;
-  cursor: default;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: 0.3s;
 }
 
+.icons-div:hover{
+  background-color: #1e3a8a; 
+  }
+ .icons-div:hover svg, .icons-div:hover .icon{
+  color:white;
+ }
 
+svg{
+  color:black;
+ 
+}
+.icon {
+  font-family: 'Material Symbols Outlined';
+  font-size: 20px;
+  color:black  
+  
+  
+}
 
 .form-container {
   /*max-width: 800px;*/