import { useState } from "react"; import { useParams } from "react-router-dom"; import Button from "./Button"; export default function ChangeRoles(): JSX.Element { const [selectedRole, setSelectedRole] = useState(""); const { username } = useParams(); const handleRoleChange = ( event: React.ChangeEvent<HTMLInputElement>, ): void => { setSelectedRole(event.target.value); }; // const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => { // event.preventDefault(); // const response = await api.changeRole(username, selectedRole, token); // if (response.success) { // console.log("Role changed successfully"); // } else { // console.error("Failed to change role:", response.message); // } // }; return ( <> <h1 className="font-bold text-[30px] mb-[20px]"> Change roll for: {username} </h1> <form className="text-[20px] font-bold border-4 border-black bg-white flex flex-col items-center justify-center min-h-[50vh] h-fit w-[30vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]" onSubmit={undefined} > <div className="self-start"> <div> <label> <input type="radio" value="System Manager" checked={selectedRole === "System Manager"} onChange={handleRoleChange} className="ml-2 mr-2 mb-6" /> System Manager </label> </div> <div> <label> <input type="radio" value="Developer" checked={selectedRole === "Developer"} onChange={handleRoleChange} className="ml-2 mr-2 mb-6" /> Developer </label> </div> <div> <label> <input type="radio" value="Tester" checked={selectedRole === "Tester"} onChange={handleRoleChange} className="ml-2 mr-2 mb-6" /> Tester </label> </div> </div> <Button text="Save" onClick={(): void => { return; }} type="submit" /> </form> </> ); }