Improve XPositionReference radio input group

src/Components/RadioGroupButtons/RadioGroupButtons.tsx

@@ -5,6 +5,7 @@ interface IRadioGroupButtonsProps {
   name: string
   value?: string
   defaultValue?: string
+  inputClassName: string
   labelText: string
   inputGroups: IInputGroup[]
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -13,32 +14,40 @@ interface IRadioGroupButtonsProps {
 export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps> = (props) => {
   let inputGroups;
   if (props.value !== undefined) {
+    // dynamic
     inputGroups = props.inputGroups.map((inputGroup) => (
-      <label key={inputGroup.value}>
+      <div key={inputGroup.value}>
         <input
+          id={inputGroup.value}
           type='radio'
           name={props.name}
-          className='m-2'
+          className={`peer m-2 ${props.inputClassName}`}
           value={inputGroup.value}
           checked={props.value === inputGroup.value}
           onChange={props.onChange}
         />
-        {inputGroup.text}
-      </label>
+        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
+          {inputGroup.text}
+        </label>
+      </div>
+
     ));
   } else {
+    // static
     inputGroups = props.inputGroups.map((inputGroup) => (
-      <label key={inputGroup.value}>
+      <div key={inputGroup.value}>
         <input
+          id={inputGroup.value}
           type='radio'
           name={props.name}
-          className='m-2'
+          className={`peer m-2 ${props.inputClassName}`}
           value={inputGroup.value}
           defaultChecked={props.defaultValue === inputGroup.value}
-          onChange={props.onChange}
         />
-        {inputGroup.text}
-      </label>
+        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
+          {inputGroup.text}
+        </label>
+      </div>
     ));
   }