add data table to saladeaula
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user