import React from 'react'
import Table from 'react-bootstrap/Table'
import "./listeRdv.css"

const ListeRdv = () => {

    const users = [

        {NoDOSSIER: '05425712' ,PATIENT: 'Dr Anna Bridges' ,MOTIF : 'cause 1' ,heureetdate : '09/03/2022, 11:30'  },
        {NoDOSSIER: '05425712' ,PATIENT: 'Dr Anna Bridges' ,MOTIF : 'cause 2' ,heureetdate : '09/03/2022, 12:30'  },
        {NoDOSSIER: '05425712' ,PATIENT: 'Dr Anna Bridges' ,MOTIF : 'cause 3 ',heureetdate : '09/03/2022, 13:30'  },
        {NoDOSSIER: '05425712' ,PATIENT: 'Dr Anna Bridges' ,MOTIF : 'cause 3 ',heureetdate : '09/03/2022, 13:30' },
    ]
    



  return (
    

        
                    
                            
                                
                                N° DOSSIER
                                PATIENT
                                MOTIF
                                DATE DU RDV
                                
                                
                                
                            
                            
                                {
                                users.map((item,i)=>
                                
                                {item.NoDOSSIER}
                                {item.PATIENT}
                                {item.MOTIF}
                                {item.heureetdate}
                                consulter
                                Reporter/Annuler
                                
                                )
                                }
                            
                            
.tableRdv{
    width:100vh;
}



thead{
    background: #F5F6FA 0% 0% no-repeat padding-box;
    text-align: left;
    font-family:  Poppins;
    letter-spacing: 0px;
    color: #A3A6B4;
    opacity: 1;
    border: none;
}
td{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #70707033;
    opacity: 1;
    text-align: left;
    font: normal normal normal 13px/20px Poppins;
    letter-spacing: 0px;
    color: #4D4F5C;
    opacity: 1;
}
.consulterBtn{
    
            Voir plus

\n    

\n  )\n    background: transparent linear-gradient(180deg, #247285 0%, #123943 100%) 0%
      0% no-repeat padding-box;
    height: 2rem;
    width: 7rem;
    color: #ffffff;
    border-radius: 2px;
}
export default ListeRdv;
.reporterBtn{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 0.5px solid #0D6378;
    opacity: 1;
    color:#0D6378;
    font-weight: 500;
    border-radius: 2px;
    height: 2rem;
    width: 8rem;
}
.voirPlusbtn{
    text-align: left;
    font: 14px/21px Source Sans Pro;
    letter-spacing: 0px;
    color: #217084;
    opacity: 1
    
}
.voirPlusbtn{
    margin-top:2vh;
    
}