44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { getUsers } from "@/utils/querys/admin/users";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import UserCard from "./components/UserCard";
|
|
|
|
export default function UserPage() {
|
|
const { data, isError, error, isLoading } = useQuery(getUsers());
|
|
|
|
if (isLoading) return <div className="m-auto">Loading users...</div>;
|
|
|
|
if (isError)
|
|
return (
|
|
<div className="m-auto">
|
|
There was an error getting the users.... {JSON.stringify(error)}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="m-2 w-dvw">
|
|
<Accordion type="single" collapsible>
|
|
{data.map((u: any) => {
|
|
return (
|
|
<AccordionItem key={u.user_id} value={u.user_id}>
|
|
<AccordionTrigger>
|
|
<span>{u.username}</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<div>
|
|
<UserCard user={u} />
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
);
|
|
})}
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|