127 lines
4.7 KiB
TypeScript
127 lines
4.7 KiB
TypeScript
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 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">
|
|
<h1 className="text-2xl font-bold tracking-tight">Gestores</h1>
|
|
<p className="text-muted-foreground">
|
|
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>
|
|
</>
|
|
)
|
|
}
|