Metamigo -> Bridge

apps/bridge-frontend/app/_components/List.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { FC } from "react";
+import { Grid, Box } from "@mui/material";
+import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
+import { useRouter } from "next/navigation";
+import { typography } from "@/app/_styles/theme";
+
+interface ListProps {
+  title: string;
+  entity: string;
+  rows: any;
+  columns: GridColDef<any>[];
+}
+
+export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
+  const router = useRouter();
+  const { h3 } = typography;
+
+  const onRowClick = (id: string) => {
+    router.push(`/${entity}/${id}`);
+  };
+
+  return (
+    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
+      <Grid container direction="column">
+        <Grid item>
+          <Box sx={h3}>{title}</Box>
+        </Grid>
+        <Grid item>
+          <Box
+            sx={{
+              backgroundColor: "#ddd",
+              border: 0,
+              width: "100%",
+              height: "100vh",
+              ".MuiDataGrid-row": {
+                cursor: "pointer",
+                "&:hover": {
+                  backgroundColor: "#1982fc33 !important",
+                  fontWeight: "bold",
+                },
+              },
+              ".MuiDataGrid-row:nth-of-type(1n)": {
+                backgroundColor: "#f3f3f3",
+              },
+              ".MuiDataGrid-row:nth-of-type(2n)": {
+                backgroundColor: "#fff",
+              },
+              ".MuiDataGrid-columnHeaderTitle": {
+                color: "#333",
+                fontWeight: "bold",
+                fontSize: 11,
+                margin: "0 auto",
+              },
+              ".MuiDataGrid-columnHeader": {
+                backgroundColor: "#ccc",
+                border: 0,
+                borderBottom: "3px solid #ddd",
+              },
+            }}
+          >
+            <DataGridPro
+              rows={rows}
+              columns={columns}
+              density="compact"
+              pagination
+              initialState={{
+                pagination: { paginationModel: { pageSize: 25 } },
+              }}
+              pageSizeOptions={[5, 10, 25]}
+              paginationMode="client"
+              sx={{ height: "100vh" }}
+              //              rowBuffer={30}
+              rowHeight={46}
+              scrollbarSize={0}
+              disableVirtualization
+              disableColumnMenu
+              onRowClick={(row: any) => onRowClick(row.id)}
+            />
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};