Added User List table

src/components/user/change-role-dialog.tsx

@@ -0,0 +1,67 @@
+import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
+import { m } from '@/paraglide/messages';
+import { UserGearIcon } from '@phosphor-icons/react';
+import { UserWithRole } from 'better-auth/plugins';
+import { useState } from 'react';
+import AdminSetUserRoleForm from '../form/admin-set-user-role-form';
+import { Button } from '../ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog';
+import { Label } from '../ui/label';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+type SetRoleProps = {
+  data: UserWithRole;
+};
+
+const ChangeRoleAction = ({ data }: SetRoleProps) => {
+  const [_open, _setOpen] = useState(false);
+  const prevent = usePreventAutoFocus();
+
+  return (
+    <Dialog open={_open} onOpenChange={_setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="rounded-full cursor-pointer text-yellow-500 hover:bg-yellow-100 hover:text-yellow-600"
+            >
+              <UserGearIcon size={16} />
+              <span className="sr-only">{m.ui_change_role_btn()}</span>
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent className="bg-yellow-500 [&_svg]:bg-yellow-500 [&_svg]:fill-yellow-500 text-white">
+          <Label>{m.ui_change_role_btn()}</Label>
+        </TooltipContent>
+        <DialogContent
+          className="max-w-100 xl:max-w-2xl"
+          {...prevent}
+          onPointerDownOutside={(e) => e.preventDefault()}
+        >
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-3 text-lg font-bold text-yellow-600">
+              <UserGearIcon size={16} />
+              {m.ui_change_role_btn()}
+            </DialogTitle>
+            <DialogDescription className="sr-only">
+              {m.ui_change_role_btn()}
+            </DialogDescription>
+          </DialogHeader>
+          <AdminSetUserRoleForm data={data} onSubmit={_setOpen} />
+        </DialogContent>
+      </Tooltip>
+    </Dialog>
+  );
+};
+
+export default ChangeRoleAction;