ui(admin): add "working" React admin ui

resources/scripts/components/admin/users/UserTableRow.tsx

@@ -0,0 +1,79 @@
+import { BanIcon, DotsVerticalIcon, LockOpenIcon, PencilIcon, SupportIcon, TrashIcon } from '@heroicons/react/solid';
+import { useState } from 'react';
+
+import Checkbox from '@/components/elements/inputs/Checkbox';
+import { Dropdown } from '@/components/elements/dropdown';
+import { Dialog } from '@/components/elements/dialog';
+import { Button } from '@/components/elements/button';
+import { User } from '@definitions/admin';
+
+interface Props {
+    user: User;
+    selected?: boolean;
+    onRowChange: (user: User, selected: boolean) => void;
+}
+
+const UserTableRow = ({ user, selected, onRowChange }: Props) => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <>
+            <Dialog title={'Delete account'} visible={visible} onDismissed={() => setVisible(false)}>
+                <Dialog.Icon type={'danger'} />
+                This account will be permanently deleted.
+                <Dialog.Buttons>
+                    <Button.Text onClick={() => setVisible(false)}>Cancel</Button.Text>
+                    <Button.Danger>Delete</Button.Danger>
+                </Dialog.Buttons>
+            </Dialog>
+            <tr>
+                <td className={'whitespace-nowrap'}>
+                    <div className={'flex justify-end items-center w-8'}>
+                        <Checkbox checked={selected} onChange={e => onRowChange(user, e.currentTarget.checked)} />
+                    </div>
+                </td>
+                <td className={'pl-6 py-4 whitespace-nowrap'}>
+                    <div className={'flex items-center'}>
+                        <div className={'w-10 h-10'}>
+                            <img src={user.avatarUrl} className={'w-10 h-10 rounded-full'} alt={'User avatar'} />
+                        </div>
+                        <div className={'ml-4'}>
+                            <p className={'font-medium'}>{user.email}</p>
+                            <p className={'text-sm text-neutral-400'}>{user.uuid}</p>
+                        </div>
+                    </div>
+                </td>
+                <td className={'pl-2 py-4 whitespace-nowrap'}>
+                    {user.isUsingTwoFactor && (
+                        <span
+                            className={
+                                'bg-green-100 uppercase text-green-700 font-semibold text-xs px-2 py-0.5 rounded'
+                            }
+                        >
+                            2-FA Enabled
+                        </span>
+                    )}
+                </td>
+                <td className={'px-6 py-4 whitespace-nowrap'}>
+                    <Dropdown>
+                        <Dropdown.Button className={'px-2'}>
+                            <DotsVerticalIcon />
+                        </Dropdown.Button>
+                        <Dropdown.Item icon={<PencilIcon />}>Edit</Dropdown.Item>
+                        <Dropdown.Item icon={<SupportIcon />}>Reset Password</Dropdown.Item>
+                        <Dropdown.Item icon={<LockOpenIcon />} disabled={!user.isUsingTwoFactor}>
+                            Disable 2-FA
+                        </Dropdown.Item>
+                        <Dropdown.Item icon={<BanIcon />}>Suspend</Dropdown.Item>
+                        <Dropdown.Gap />
+                        <Dropdown.Item icon={<TrashIcon />} onClick={() => setVisible(true)} danger>
+                            Delete Account
+                        </Dropdown.Item>
+                    </Dropdown>
+                </td>
+            </tr>
+        </>
+    );
+};
+
+export default UserTableRow;