Added User List table

src/components/user/edit-user-dialog.tsx

@@ -0,0 +1,66 @@
+import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
+import { m } from '@/paraglide/messages';
+import { PenIcon } from '@phosphor-icons/react';
+import { UserWithRole } from 'better-auth/plugins';
+import { useState } from 'react';
+import AdminUpdateUserInfoForm from '../form/admin-update-user-info-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 EditUserProps = {
+  data: UserWithRole;
+};
+
+const EditUserAction = ({ data }: EditUserProps) => {
+  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-blue-500 hover:bg-blue-100 hover:text-blue-600"
+            >
+              <PenIcon size={16} />
+              <span className="sr-only">{m.ui_edit_user_btn()}</span>
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
+          <Label>{m.ui_edit_user_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-blue-600">
+              <PenIcon size={16} /> {m.ui_edit_user_btn()}
+            </DialogTitle>
+            <DialogDescription className="sr-only">
+              {m.ui_edit_user_btn()}
+            </DialogDescription>
+          </DialogHeader>
+          <AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
+        </DialogContent>
+      </Tooltip>
+    </Dialog>
+  );
+};
+
+export default EditUserAction;