62 lines
2.1 KiB
JavaScript
62 lines
2.1 KiB
JavaScript
import { Person } from 'components'
|
|
import { DeleteIconBtn } from './common/IconBtns'
|
|
|
|
export default function UsersTable(props) {
|
|
//? Props
|
|
const { deleteUserHandler, users } = props
|
|
|
|
//? Render(s)
|
|
return (
|
|
<div className="mx-3 overflow-x-auto mt-7 lg:mx-5 xl:mx-10">
|
|
<table className="w-full whitespace-nowrap">
|
|
<thead className="h-9 bg-emerald-50">
|
|
<tr className="text-emerald-500">
|
|
<th></th>
|
|
<th className="border-gray-100 border-x-2">ID</th>
|
|
<th>角色</th>
|
|
<th className="border-gray-100 border-x-2">名称</th>
|
|
<th>邮箱</th>
|
|
<th className="border-r-2 border-gray-100">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-gray-600">
|
|
{users.length > 0 &&
|
|
users.map(user => (
|
|
<tr
|
|
className="text-xs text-center transition-colors border-b border-gray-100 md:text-sm hover:bg-gray-50"
|
|
key={user._id}
|
|
>
|
|
<td className="px-2 py-4">
|
|
<Person className="mx-auto w-7 h-7" />
|
|
</td>
|
|
<td className="px-2 py-4">{user._id}</td>
|
|
<td className="px-2 py-4 font-bold">
|
|
<span
|
|
className={`py-1.5 px-2 rounded-lg font-bold inline-block
|
|
${
|
|
user.role === 'admin'
|
|
? 'text-blue-600 bg-blue-50'
|
|
: user.role === 'user'
|
|
? 'text-amber-600 bg-amber-50'
|
|
: user.root
|
|
? 'text-green-600 bg-green-50'
|
|
: ''
|
|
}
|
|
`}
|
|
>
|
|
{user.role}
|
|
</span>
|
|
</td>
|
|
<td className="px-2 py-4">{user.name}</td>
|
|
<td className="px-2 py-4">{user.email}</td>
|
|
<td className="px-2 py-4">
|
|
<DeleteIconBtn onClick={() => deleteUserHandler(user._id)} />
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|