Add Radiobox component and integrate it into UsersList for role selection

- Created Radiobox component with associated styles.
- Updated UsersList to use Radiobox for user role selection, enhancing UI and functionality.
- Improved styling for UsersList items and added hover effect.

Author: alexbaumgertner

src/components/Radiobox/Radiobox.module.css

@@ -0,0 +1,9 @@
+.component {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.label {
+  margin: 0;
+}

src/components/Radiobox/Radiobox.tsx

@@ -0,0 +1,31 @@
+import classes from './Radiobox.module.css'
+
+export const Radiobox = ({
+  name,
+  value,
+  checked,
+  onChange,
+  label,
+  disabled,
+}: {
+  name: string
+  value: string
+  checked: boolean
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  label: string
+  disabled?: boolean
+} & React.InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <div className={classes.component}>
+      <input
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+      />
+      <label className={classes.label}>{label}</label>
+    </div>
+  )
+}

src/components/Radiobox/index.ts

@@ -0,0 +1 @@
+export { Radiobox } from './Radiobox'

src/components/UsersList/UsersList.module.css

@@ -10,5 +10,18 @@
 
 .item {
   display: flex;
-  padding: 0 0 1rem 0;
+  padding: 1rem;
+}
+
+.item:hover {
+  background-color: #e9ecef;
+}
+
+.email {
+  margin: 0;
+  min-width: 350px;
+}
+
+.roles {
+  margin: 0;
 }

src/components/UsersList/UsersList.tsx

@@ -4,9 +4,10 @@ import React from 'react'
 import { useQuery, useMutation } from '@apollo/client'
 import { GET_USERS, GET_ROLES, UPDATE_USER_ROLE } from '@/db/queries-qraphql'
 import classes from './UsersList.module.css'
+import { Radiobox } from '../Radiobox'
 
 export const UsersList = () => {
-  const [updateUserRole] = useMutation(UPDATE_USER_ROLE)
+  const [updateUserRole, { loading }] = useMutation(UPDATE_USER_ROLE)
   const { data: usersData } = useQuery(GET_USERS)
   const { data: rolesData } = useQuery(GET_ROLES)
 
@@ -24,20 +25,18 @@ export const UsersList = () => {
       <ul className={classes.list}>
         {usersData?.users?.map((user) => (
           <li key={user.id} className={classes.item}>
-            {user.name} ({user.email})
-            <ol>
+            <p className={classes.email}>{user.email}</p>
+            <ol className={classes.roles}>
               {rolesData?.roles?.map((role) => (
                 <li key={role.id}>
-                  <label>
-                    <input
-                      type="radio"
-                      name={`user-${user.id}-role`}
-                      value={role.id}
-                      checked={user.role_id === role.id}
-                      onChange={() => handleUserRoleChange(user.id, role.id)}
-                    />{' '}
-                    {role.name}
-                  </label>
+                  <Radiobox
+                    name={`user-${user.id}-role`}
+                    value={role.id}
+                    checked={user.role_id === role.id}
+                    onChange={() => handleUserRoleChange(user.id, role.id)}
+                    label={role.name}
+                    disabled={loading}
+                  />
                 </li>
               ))}
             </ol>