Select Git revision
AccountCard.js
AccountCard.js 5.18 KiB
function accountCard({
updateAccountStatus, name, surname, size, weight, shoesSize, isAdmin, disableButton
}) {
const handleSelect = (surname, name, newStatus) => {
updateAccountStatus(surname, name, newStatus ? 1 : 0);
}
let btnText = isAdmin === 1 ? "Passer client" : "Passer admin";
console.log("OK");
return (
<div className=" rounded overflow-hidden shadow-lg">
<div className="px-6 pt-2">
<div className="font-bold text-xl mb-2"></div>
<p className="text-gray-700 text-base">{surname} {name}</p>
<div style={{display: "inline-flex"}}>
<svg fill="#000000" height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<g>
<g>
<path d="M300.233,0h-88.467c-14.329,0-25.987,11.658-25.987,25.987v460.026c0,14.329,11.658,25.987,25.987,25.987h88.467
c14.329,0,25.987-11.658,25.987-25.987V25.987C326.22,11.658,314.563,0,300.233,0z M309.633,35.387h-35.94
c-4.58,0-8.294,3.712-8.294,8.294c0,4.581,3.713,8.294,8.294,8.294h35.94v18.799h-18.246c-4.58,0-8.294,3.712-8.294,8.294
s3.713,8.294,8.294,8.294h18.246v18.799h-35.94c-4.58,0-8.294,3.712-8.294,8.294c0,4.581,3.713,8.294,8.294,8.294h35.94v18.799
h-18.246c-4.58,0-8.294,3.712-8.294,8.294c0,4.581,3.713,8.294,8.294,8.294h18.246v18.799h-35.94c-4.58,0-8.294,3.712-8.294,8.294
c0,4.581,3.713,8.294,8.294,8.294h35.94v18.799h-18.246c-4.58,0-8.294,3.712-8.294,8.294c0,4.581,3.713,8.294,8.294,8.294h18.246
v18.799h-35.94c-4.58,0-8.294,3.712-8.294,8.294s3.713,8.294,8.294,8.294h35.94v18.799h-18.246c-4.58,0-8.294,3.712-8.294,8.294
s3.713,8.294,8.294,8.294h18.246v18.799h-35.94c-4.58,0-8.294,3.712-8.294,8.294c0,4.581,3.713,8.294,8.294,8.294h35.94v18.799
h-18.246c-4.58,0-8.294,3.712-8.294,8.294c0,4.581,3.713,8.294,8.294,8.294h18.246v18.799h-35.94c-4.58,0-8.294,3.712-8.294,8.294
c0,4.581,3.713,8.294,8.294,8.294h35.94v18.799h-18.246c-4.58,0-8.294,3.712-8.294,8.294s3.713,8.294,8.294,8.294h18.246v18.799
h-35.94c-4.58,0-8.294,3.712-8.294,8.294s3.713,8.294,8.294,8.294h35.94v9.4c0,5.183-4.216,9.4-9.4,9.4h-88.467
c-5.183,0-9.4-4.217-9.4-9.4V25.987c0-5.183,4.216-9.4,9.4-9.4h88.467c5.183,0,9.4,4.217,9.4,9.4V35.387z"/>
</g>
</g>
</svg>
<p style={{marginRight: "5%"}}>{size}cm</p>
<svg height="24px" width="24px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<g>
<path class="st0" d="M455.998,0.004H56.002C25.063,0.011,0.008,25.067,0,56.006v399.989c0.008,30.938,25.063,55.994,56.002,56.002
h399.997c30.938-0.008,55.994-25.063,56.002-56.002V56.006C511.993,25.067,486.937,0.011,455.998,0.004z M479.999,455.994
c-0.007,6.68-2.664,12.579-7.032,16.969c-4.39,4.367-10.289,7.024-16.969,7.032H56.002c-6.68-0.008-12.579-2.664-16.969-7.032
c-4.367-4.39-7.023-10.289-7.031-16.969V56.006c0.008-6.68,2.664-12.579,7.031-16.977c4.39-4.359,10.289-7.016,16.969-7.023
h399.997c6.68,0.007,12.579,2.664,16.969,7.023c4.367,4.398,7.024,10.297,7.032,16.977V455.994z"/>
<path class="st0" d="M128.012,119.101l26.391,76.783H270.86l16.352-67.947l9.938,2.031l9.93,2.015l-10.696,63.9h61.212
l26.392-76.783C346.612,96.577,302.83,83.6,256.008,83.6C209.178,83.6,165.388,96.577,128.012,119.101z"/>
</g>
</svg>
<p style={{marginLeft: "3%", marginRight: "4%"}}>{weight}kg</p>
<svg id="_1_-_10" data-name="1 - 10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><title>Run</title><g id="Jogging"><path d="M41.394,33.985,36.647,31.4A7,7,0,0,1,33,25.251V14a3,3,0,0,0-3-3H24a3,3,0,0,1-3-3V7a3,3,0,0,0-3-3h-.131a3.011,3.011,0,0,0-2.193.953L6.137,15.173A7,7,0,0,0,6.2,24.788l14.537,15.2A13.059,13.059,0,0,0,30.128,44H39a5.006,5.006,0,0,0,5-5v-.625A5,5,0,0,0,41.394,33.985ZM17.139,6.317A1,1,0,0,1,17.869,6H18a1,1,0,0,1,1,1V8a5.006,5.006,0,0,0,5,5h6a1,1,0,0,1,1,1v2H28a1,1,0,0,0,0,2h3v2H28a1,1,0,0,0,0,2h3v2H28a1,1,0,0,0,0,2h3c.018,0,.033-.009.05-.01a8.981,8.981,0,0,0,4.64,7.162l4.747,2.589A2.984,2.984,0,0,1,41.647,37H30.689a5.025,5.025,0,0,1-3.608-1.539L8.253,15.838ZM39,42H30.128a11.049,11.049,0,0,1-7.949-3.4L7.642,23.405a5,5,0,0,1-.673-6.017L25.638,36.846A7.032,7.032,0,0,0,30.689,39H42A3,3,0,0,1,39,42Z" /><path d="M18,41H5a1,1,0,0,0,0,2H18a1,1,0,0,0,0-2Z" /><path d="M5,38h8a1,1,0,0,0,0-2H5a1,1,0,0,0,0,2Z" /><path d="M5,33H8a1,1,0,0,0,0-2H5a1,1,0,0,0,0,2Z" /></g></svg>
<p style={{marginLeft: "1%"}}>{shoesSize}</p>
</div>
</div>
<div className="pb-3">
<button
onClick={() => handleSelect(surname, name, !isAdmin)}
className={`bg-blue-500 text-white font-bold py-2 px-4 rounded ${disableButton ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-700'}`}
>
{btnText}
</button>
</div>
</div>
)
}
export default accountCard