add admins

apps/admin.saladeaula.digital/app/routes/_.$orgid.admins._index/route.tsx

@@ -1,10 +1,44 @@
 import type { Route } from './+types'
 
+import {
+  EllipsisVerticalIcon,
+  PencilIcon,
+  UserRoundMinusIcon
+} from 'lucide-react'
+import { Suspense } from 'react'
+import { Await, NavLink } from 'react-router'
+
+import { Abbr } from '@/components/abbr'
+import { request as req } from '@/lib/request'
+import { Skeleton } from '@repo/ui/components/skeleton'
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@repo/ui/components/ui/dropdown-menu'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+import { initials } from '@repo/ui/lib/utils'
+
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Gestores' }]
 }
 
-export default function Route() {
+export async function loader({ context, request, params }: Route.LoaderArgs) {
+  const data = req({
+    url: `/orgs/${params.orgid}/admins`,
+    context,
+    request
+  }).then((r) => r.json())
+
+  return {
+    data
+  }
+}
+
+export default function Route({ loaderData: { data } }) {
   return (
     <>
       <div className="space-y-0.5 mb-8">
@@ -13,6 +47,80 @@ export default function Route() {
           Adicione gestores e organize sua equipe de forma prática.
         </p>
       </div>
+
+      <Suspense fallback={<Skeleton />}>
+        <Await resolve={data}>
+          {({ items }) => {
+            return (
+              <div className="grid gap-4 lg:gap-8 md:grid-cols-2 lg:grid-cols-3">
+                {items.map(({ sk, name, email }, index) => {
+                  const [_, id] = sk.split('#')
+                  return (
+                    <section
+                      key={index}
+                      className="bg-card border-border/50 hover:shadow-muted-foreground/10 hover:border-muted group relative overflow-hidden rounded-2xl border p-8 transition-all duration-300  hover:shadow-2xl"
+                    >
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            className="data-[state=open]:bg-muted text-muted-foreground cursor-pointer absolute z-1 right-4 top-4"
+                            size="icon-sm"
+                          >
+                            <EllipsisVerticalIcon />
+                            <span className="sr-only">Abrir menu</span>
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                          align="end"
+                          className="w-46 *:cursor-pointer"
+                        >
+                          <DropdownMenuItem
+                            asChild
+                            onSelect={(e) => e.preventDefault()}
+                          >
+                            <NavLink to={`../users/${id}`}>
+                              {({ isPending }) => (
+                                <>
+                                  {isPending ? <Spinner /> : <PencilIcon />}
+                                  Editar
+                                </>
+                              )}
+                            </NavLink>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem variant="destructive">
+                            <UserRoundMinusIcon /> Revogar privilégios
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+
+                      <div className="from-muted-foreground/5 absolute inset-0 bg-gradient-to-br to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                      <div className="relative flex flex-col items-center text-center">
+                        <div className="relative mb-6">
+                          <Avatar className="size-24 lg:size-28">
+                            <AvatarFallback className="text-2xl">
+                              {initials(name)}
+                            </AvatarFallback>
+                          </Avatar>
+                        </div>
+
+                        <div className="mb-6">
+                          <h1 className="mb-2 text-xl font-bold">
+                            <Abbr>{name}</Abbr>
+                          </h1>
+                          <p className="text-muted-foreground bg-muted/50 inline-block rounded-full px-4 py-1.5 text-sm font-medium">
+                            <Abbr>{email}</Abbr>
+                          </p>
+                        </div>
+                      </div>
+                    </section>
+                  )
+                })}
+              </div>
+            )
+          }}
+        </Await>
+      </Suspense>
     </>
   )
 }