74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
"use client";
|
|
import { useGetUsersQuery } from "@/state/api";
|
|
import { useAppSelector } from "@/app/redux";
|
|
import React from "react";
|
|
import Header from "@/app/components/Header";
|
|
import {
|
|
DataGrid,
|
|
GridColDef,
|
|
GridToolbarContainer,
|
|
GridToolbarExport,
|
|
GridToolbarFilterButton,
|
|
} from "@mui/x-data-grid";
|
|
import Image from "next/image";
|
|
import { dataGridSxStyles } from "@/lib/utils";
|
|
|
|
const CustomToolbar = () => (
|
|
<GridToolbarContainer className="toolbar flex gap-2">
|
|
<GridToolbarFilterButton />
|
|
<GridToolbarExport />
|
|
</GridToolbarContainer>
|
|
);
|
|
|
|
const columns: GridColDef[] = [
|
|
{ field: "userId", headerName: "ID", width: 100 },
|
|
{ field: "username", headerName: "Username", width: 150 },
|
|
{
|
|
field: "profilePictureUrl",
|
|
headerName: "Profile Picture",
|
|
width: 100,
|
|
renderCell: (params) => (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<div className="h-9 w-9">
|
|
<Image
|
|
src={`${process.env.S3_PUBLIC_IMAGE_URL}/${params.value}`}
|
|
alt={params.row.username}
|
|
width={100}
|
|
height={50}
|
|
className="h-full rounded-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
const Users = () => {
|
|
const { data: users, isLoading, isError } = useGetUsersQuery();
|
|
const isDarkMode = useAppSelector((state) => state.global.isDarkMode);
|
|
|
|
if (isLoading) return <div>Loading...</div>;
|
|
if (isError || !users) return <div>Error fetching users</div>;
|
|
|
|
return (
|
|
<div className="flex w-full flex-col p-8">
|
|
<Header name="Users" />
|
|
<div style={{ height: 650, width: "100%" }}>
|
|
<DataGrid
|
|
rows={users || []}
|
|
columns={columns}
|
|
getRowId={(row) => row.userId}
|
|
pagination
|
|
slots={{
|
|
toolbar: CustomToolbar,
|
|
}}
|
|
className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
|
|
sx={dataGridSxStyles(isDarkMode)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Users;
|