display admins in group details

client/src/components/group/GroupInfo.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Card,
   CardContent,
+  Grid,
   Table,
   TableBody,
   TableCell,
@@ -12,12 +13,17 @@ import {
 } from '@material-ui/core';
 import { IgetGroupById, getGroupById } from '../../graphql/queries/group/getGroupById';
 
+import { CardTable } from '../utils/CardTable';
 import { Loading } from '../utils/Loading';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { StyledLink } from '../utils/StyledLink';
 import { useQuery } from '@apollo/client';
 
+interface ITableRow {
+  name: string;
+}
+
 const TableRowWithData: React.FC<{ field: string; value?: string | number }> = ({ field, value = '-' }) => {
   return (
     <TableRow>
@@ -61,6 +67,8 @@ export const GroupInfo: React.FC<RouteComponentProps<TParams>> = ({ match }) =>
           {groupData?.group.name} Csoport
         </Typography>
       </Box>
+      <Grid container spacing={1}>
+        <Grid item xs={12} md={6}>
           <Card>
             <CardContent style={{ padding: 0 }}>
               <Loading isLoading={groupDataIsLoading}>
@@ -68,10 +76,13 @@ export const GroupInfo: React.FC<RouteComponentProps<TParams>> = ({ match }) =>
                   <TableHead>
                     <TableRow>
                       <TableCell>
-                    <Box display="flex" justifyContent="space-between" alignItems="center">
+                        <Box display="flex" justifyContent="space-between" alignItems="center" pl="8px">
                           <Typography variant="h6">Adatok</Typography>
                           {/* TODO: Apply */}
-                      <StyledLink to={`/group/${match.params.id}/admin`} style={{ color: theme.palette.primary.dark }}>
+                          <StyledLink
+                            to={`/group/${match.params.id}/admin`}
+                            style={{ color: theme.palette.primary.dark }}
+                          >
                             Adminisztráció
                           </StyledLink>
                         </Box>
@@ -88,6 +99,22 @@ export const GroupInfo: React.FC<RouteComponentProps<TParams>> = ({ match }) =>
               </Loading>
             </CardContent>
           </Card>
+        </Grid>
+        {/* TODO get Admins */}
+        <Grid item xs={12} md={6}>
+          <CardTable<ITableRow>
+            columns={[
+              {
+                title: 'Név',
+                field: 'name',
+              },
+            ]}
+            data={[{ name: 'Admin guy' }]}
+            isLoading={false}
+            title={<Typography variant="h6">Adminok</Typography>}
+          />
+        </Grid>
+      </Grid>
     </>
   );
 };