space between permision

src/pages/users/List.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add, Eye, Trash } from 'iconsax-react'
+import { Add, Eye } from 'iconsax-react'
 import Input from '../../components/Input'
 import Td from '../../components/Td'
 import { Link, useNavigate } from 'react-router-dom'
@@ -12,6 +12,7 @@ import PageLoading from '../../components/PageLoading'
 import { toast } from '../../components/Toast';
 import { ErrorType } from '../../helpers/types'
 import Pagination from '../../components/Pagination'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
 const UsersList: FC = () => {
 
     const navigate = useNavigate()
@@ -90,6 +91,7 @@ const UsersList: FC = () => {
                                                 <Td text={item.firstName + ' ' + item.lastName} />
                                                 <Td text={item.email} />
                                                 <Td text={''}>
+                                                    <div className='flex flex-wrap gap-2'>
                                                         {
                                                             item.roles.map((role) => (
                                                                 <div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
@@ -97,6 +99,7 @@ const UsersList: FC = () => {
                                                                 </div>
                                                             ))
                                                         }
+                                                    </div>
                                                 </Td>
                                                 <Td text={''}>
                                                     <div className='flex gap-2'>
@@ -104,10 +107,11 @@ const UsersList: FC = () => {
                                                             <Eye size={20} color='#8C90A3' />
                                                         </Link>
 
-                                                        <Trash
+                                                        <TrashWithConfrim
                                                             size={20}
                                                             color='#8C90A3'
-                                                            onClick={() => handleDeleteUser(item.id)}
+                                                            onDelete={() => handleDeleteUser(item.id)}
+                                                            isLoading={deleteUser.isPending}
                                                         />
                                                     </div>
                                                 </Td>