Updates

src/components/general/admin/hero.tsx

@@ -16,7 +16,7 @@ export default function AdminHero({ title, ctas, description }: Props) {
     const { pageProps } = useContext(AppContext);
 
     return (
-        <Row className="w-full grid-cell-content justify-between">
+        <Row className="w-full grid-cell-content justify-between flex-nowrap items-start">
             <Stack className="gap-2">
                 <H1 className="admin-h1">{title}</H1>
                 {description ? (

src/components/general/avatar.tsx

@@ -0,0 +1,32 @@
+import useStatus from "@/twui/components/hooks/useStatus";
+import Img from "@/twui/components/layout/Img";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+    image_url?: string | null;
+    image_size?: number;
+    title?: string;
+};
+
+export default function Avatar({ image_url, image_size = 35, title }: Props) {
+    const { loading, setLoading } = useStatus();
+
+    if (!image_url) {
+        return (
+            <div
+                className={twMerge(
+                    `bg-slate-100 dark:bg-white/10 rounded-full`,
+                    ``,
+                )}
+                style={{
+                    width: `${image_size}px`,
+                    height: `${image_size}px`,
+                }}
+            />
+        );
+    }
+
+    return (
+        <Img circle size={image_size} src={image_url} alt={title || `Avatar`} />
+    );
+}

src/components/pages/admin/users/(sections)/users-list.tsx

@@ -0,0 +1,38 @@
+import Avatar from "@/src/components/general/avatar";
+import { AppContext } from "@/src/pages/_app";
+import Tag from "@/twui/components/elements/Tag";
+import Row from "@/twui/components/layout/Row";
+import Span from "@/twui/components/layout/Span";
+import Stack from "@/twui/components/layout/Stack";
+import { useContext } from "react";
+
+export default function UsersList() {
+    const { pageProps } = useContext(AppContext);
+    const { deployment_users } = pageProps;
+
+    return (
+        <Stack className="grid-cell-content">
+            {deployment_users?.map((dep_usr, index) => {
+                const is_super_admin = Boolean(dep_usr.is_super_admin);
+
+                return (
+                    <Row key={index} className="w-full justify-between">
+                        <Row>
+                            <Avatar
+                                image_url={dep_usr.image}
+                                title={`${dep_usr.first_name} Image`}
+                                image_size={40}
+                            />
+                            <Span>
+                                {dep_usr.first_name} {dep_usr.last_name}
+                            </Span>
+                        </Row>
+                        <Row>
+                            {is_super_admin ? <Tag>Super Admin</Tag> : null}
+                        </Row>
+                    </Row>
+                );
+            })}
+        </Stack>
+    );
+}

src/components/pages/admin/users/index.tsx

@@ -2,6 +2,8 @@ import { Fragment, useContext } from "react";
 import { AppContext } from "@/src/pages/_app";
 import Divider from "@/twui/components/layout/Divider";
 import AdminHero from "@/src/components/general/admin/hero";
+import Button from "@/twui/components/layout/Button";
+import UsersList from "./(sections)/users-list";
 
 export default function Main() {
     const { pageProps } = useContext(AppContext);
@@ -11,8 +13,16 @@ export default function Main() {
             <AdminHero
                 title={`Users`}
                 description={<>All Users in this deployment</>}
+                ctas={
+                    <>
+                        <Button title="Add User" href={`/admin/users/add-user`}>
+                            Add User
+                        </Button>
+                    </>
+                }
             />
             <Divider />
+            <UsersList />
         </Fragment>
     );
 }

src/layouts/admin/(partials)/header-user.tsx

@@ -1,40 +1,26 @@
+import Avatar from "@/src/components/general/avatar";
 import { AppContext } from "@/src/pages/_app";
 import Dropdown from "@/twui/components/elements/Dropdown";
 import LinkList from "@/twui/components/elements/LinkList";
 import LucideIcon from "@/twui/components/elements/lucide-icon";
 import Paper from "@/twui/components/elements/Paper";
 import Divider from "@/twui/components/layout/Divider";
-import Img from "@/twui/components/layout/Img";
 import Row from "@/twui/components/layout/Row";
 import Span from "@/twui/components/layout/Span";
 import { useContext } from "react";
-import { twMerge } from "tailwind-merge";
 
 export default function HeaderUser() {
     const { pageProps } = useContext(AppContext);
     const { user } = pageProps;
 
-    const ICON_SIZE = 35;
-
     return (
         <Dropdown
             target={
                 <Row className="-my-2">
-                    {user.image_thumbnail ? (
+                    <Avatar
-                        <Img
+                        image_url={user.image_thumbnail}
-                            circle
+                        title={`${user.first_name} Image`}
-                            size={ICON_SIZE}
-                            src={user.image_thumbnail}
-                            alt={`${user.first_name} Image`}
                     />
-                    ) : (
-                        <div
-                            className={twMerge(
-                                `bg-slate-100 dark:bg-white/10 rounded-full w-[35px] h-[35px]`,
-                                ``,
-                            )}
-                        />
-                    )}
                     <Span>{user.first_name}</Span>
                     <LucideIcon name="ChevronDown" size={17} />
                 </Row>

src/styles/globals.css

@@ -77,7 +77,7 @@
 }
 
 .twui-button-primary * {
-    @apply text-primary-text;
+    @apply text-primary-text font-semibold;
 }
 
 .twui-h1,