Created the possibility to delete a user

src/pages/(admin)/Lists/UserList.tsx

@@ -1,20 +1,12 @@
 import useUsers from "@/hooks/useUsers";
-import {Type} from "@/interfaces/user";
+import {Type, User} from "@/interfaces/user";
 import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import {useState} from "react";
-import {BsCheck} from "react-icons/bs";
+import {BsCheck, BsPerson, BsTrash} from "react-icons/bs";
 
-type TableUser = {
-	id: string;
-	name: string;
-	email: string;
-	type: Type;
-	isVerified: boolean;
-};
-
-const columnHelper = createColumnHelper<TableUser>();
+const columnHelper = createColumnHelper<User>();
 
 export default function UserList() {
 	const {users} = useUsers();
@@ -34,7 +26,7 @@ export default function UserList() {
 			cell: (info) => capitalize(info.getValue()),
 		}),
 		columnHelper.accessor("isVerified", {
-			header: "Verification Status",
+			header: "Verification",
 			cell: (info) => (
 				<div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
 					<div
@@ -48,6 +40,22 @@ export default function UserList() {
 				</div>
 			),
 		}),
+		{
+			header: "",
+			id: "actions",
+			cell: ({row}: {row: {original: User}}) => {
+				return (
+					<div className="flex gap-4">
+						<div data-tip="Change Type" className="cursor-pointer tooltip">
+							<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</div>
+						<div data-tip="Delete" className="cursor-pointer tooltip">
+							<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</div>
+					</div>
+				);
+			},
+		},
 	];
 
 	const table = useReactTable({
@@ -62,7 +70,7 @@ export default function UserList() {
 				{table.getHeaderGroups().map((headerGroup) => (
 					<tr key={headerGroup.id}>
 						{headerGroup.headers.map((header) => (
-							<th className="py-4" key={header.id}>
+							<th className="py-4 px-4 text-left" key={header.id}>
 								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 							</th>
 						))}
@@ -71,9 +79,9 @@ export default function UserList() {
 			</thead>
 			<tbody className="px-2">
 				{table.getRowModel().rows.map((row) => (
-					<tr className="bg-white rounded-lg shadow py-2" key={row.id}>
+					<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
 						{row.getVisibleCells().map((cell) => (
-							<td className="px-4 py-2" key={cell.id}>
+							<td className="px-4 py-2 items-center w-fit" key={cell.id}>
 								{flexRender(cell.column.columnDef.cell, cell.getContext())}
 							</td>
 						))}