Update Bridge file layout

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

@@ -1,10 +1,9 @@
 "use client";
 
 import { FC } from "react";
-import { Grid, Box } from "@mui/material";
-import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
+import { GridColDef } from "@mui/x-data-grid-pro";
 import { useRouter } from "next/navigation";
-import { typography } from "@/app/_styles/theme";
+import { List as InternalList } from "ui";
 
 interface ListProps {
   title: string;
@@ -15,72 +14,17 @@ interface ListProps {
 
 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>
+    <InternalList
+      title={title}
+      rows={rows}
+      columns={columns}
+      onRowClick={onRowClick}
+    />
   );
 };