n3wt-school/Front-End/src/components/ProfileSelector.js

import React from 'react';

const ProfileSelector = ({ selectedProfile, setSelectedProfile }) => {
  return (
    <div className="flex space-x-4">
      <button
        type="button"
        className={`px-4 py-2 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-300 ${selectedProfile === 1 ? 'bg-blue-500 text-white ring-2 ring-blue-500' : 'bg-gray-200'}`}
        onClick={() => setSelectedProfile(1)}
      >
        ADMINISTRATEUR
      </button>
      <button
        type="button"
        className={`px-4 py-2 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-300 ${selectedProfile === 0 ? 'bg-blue-500 text-white ring-2 ring-blue-500' : 'bg-gray-200'}`}
        onClick={() => setSelectedProfile(0)}
      >
        PROFESSEUR
      </button>
      <button
        type="button"
        className={`px-4 py-2 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-300 ${selectedProfile === 2 ? 'bg-blue-500 text-white ring-2 ring-blue-500' : 'bg-gray-200'}`}
        onClick={() => setSelectedProfile(2)}
      >
        PARENT
      </button>
    </div>
  );
};

export default ProfileSelector;