add data table to saladeaula

This commit is contained in:
2025-11-24 15:31:36 -03:00
parent 97573868b7
commit 1b5d331c36
9 changed files with 268 additions and 186 deletions

View File

@@ -59,7 +59,7 @@ export async function loader({ context, request, params }: Route.LoaderArgs) {
export default function Route({ loaderData: { data } }) {
return (
<>
<Suspense fallback={<Skeleton />}>
<div className="space-y-0.5 mb-8">
<h1 className="text-2xl font-bold tracking-tight">Gestores</h1>
<p className="text-muted-foreground">
@@ -67,52 +67,50 @@ export default function Route({ loaderData: { data } }) {
</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 }: Admin) => {
const [_, id] = sk.split('#')
<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 }: Admin) => {
const [_, id] = sk.split('#')
return (
<section
key={id}
className="bg-card border-border/50 hover:shadow-muted-foreground/10 hover:border-muted group
return (
<section
key={id}
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"
>
<ActionMenu id={id} />
<div
className="from-muted-foreground/5 absolute inset-0 bg-gradient-to-br to-transparent
>
<ActionMenu id={id} />
<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 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>
</section>
)
})}
</div>
)
}}
</Await>
</Suspense>
</>
<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>
)
}

View File

@@ -34,7 +34,7 @@ export async function loader({ context, request, params }: Route.LoaderArgs) {
export default function Route({ loaderData: { data } }) {
return (
<>
<Suspense fallback={<Skeleton />}>
<div className="space-y-0.5 mb-8">
<h1 className="text-2xl font-bold tracking-tight">
Importações de colaboradores
@@ -45,31 +45,29 @@ export default function Route({ loaderData: { data } }) {
</p>
</div>
<Suspense fallback={<Skeleton />}>
<Await resolve={data}>
{(resolved) => (
<>
<Empty className="border border-dasheds">
<EmptyHeader>
<EmptyMedia variant="icon">
<UploadIcon />
</EmptyMedia>
<EmptyTitle>Nenhum importação ainda</EmptyTitle>
<EmptyDescription>
Importe seus colaboradores para gerenciar, segmentar e
facilitar sua gestão.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>
<PlusIcon /> Importar
</Button>
</EmptyContent>
</Empty>
</>
)}
</Await>
</Suspense>
</>
<Await resolve={data}>
{(resolved) => (
<>
<Empty className="border border-dasheds">
<EmptyHeader>
<EmptyMedia variant="icon">
<UploadIcon />
</EmptyMedia>
<EmptyTitle>Nenhum importação ainda</EmptyTitle>
<EmptyDescription>
Importe seus colaboradores para gerenciar, segmentar e
facilitar sua gestão.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>
<PlusIcon /> Importar
</Button>
</EmptyContent>
</Empty>
</>
)}
</Await>
</Suspense>
)
}

View File

@@ -27,9 +27,8 @@ export async function loader({ params, request, context }: Route.LoaderArgs) {
return { data: enrollment }
}
export default function UserModal({ loaderData }: Route.ComponentProps) {
export default function UserModal({}: Route.ComponentProps) {
const navigate = useNavigate()
const { enrollment } = loaderData
return (
<Dialog