GroupAdmin.tsx

import { Card, CardContent, Grid, Typography, useTheme } from '@material-ui/core';

import React from 'react';
import { StyledLink } from '../utils/StyledLink';

export const GroupAdmin: React.FC = () => {
  const theme = useTheme();
  return (
    <Grid container spacing={1} justify="center">
      <Grid item xs={12} md={4}>
        <Card>
          <CardContent>
            <Typography variant="subtitle1">Csoport adatai</Typography>
            <Typography variant="subtitle1">Neve: Some Csoport</Typography>
            <Typography variant="subtitle1">
              Leírása: Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis molestias eveniet voluptatum
              repellendus, temporibus quod nisi beatae consequatur, voluptate optio illum aperiam quae possimus dolorum
              sed inventore aut? Consequuntur, tempora.
            </Typography>
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={12} md={5}>
        <Grid container spacing={1}>
          <Grid item xs={12}>
            <Card>
              <CardContent>
                <Typography align="center" variant="subtitle1">
                  13 Új jelentkező
                </Typography>
                <Typography align="center" variant="subtitle1">
                  {/* TODO link to actual group */}
                  <StyledLink
                    to={`/group/1/admin/members?role=applicant`}
                    style={{ color: theme.palette.primary.dark }}
                  >
                    Bírálás
                  </StyledLink>
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12}>
            <Card>
              <CardContent>
                <Typography align="center" variant="subtitle1">
                  7 Kölcsönzés
                </Typography>
                <Typography align="center" variant="subtitle1">
                  {/* TODO link to actual group */}
                  <StyledLink to={`/group/1/admin/rentals?state=active`} style={{ color: theme.palette.primary.dark }}>
                    Kezelés
                  </StyledLink>
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12}>
            <Card>
              <CardContent>
                <Typography align="center" variant="subtitle1">
                  12 Hamarosan lejáró garancia
                </Typography>
                <Typography align="center" variant="subtitle1">
                  {/* TODO link to actual group */}
                  <StyledLink
                    to={`/group/1/admin/documents?order_by=expire`}
                    style={{ color: theme.palette.primary.dark }}
                  >
                    Megtekintés
                  </StyledLink>
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Grid>
      <Grid item xs={12} md={3}>
        <Grid container spacing={1}>
          <Grid item xs={12}>
            {/* TODO link to actual group */}
            <StyledLink to="/group/1/admin/members">
              <Card>
                <CardContent>
                  <Typography align="center" variant="subtitle1">
                    Tagok
                  </Typography>
                </CardContent>
              </Card>
            </StyledLink>
          </Grid>
          <Grid item xs={12}>
            {/* TODO link to actual group */}
            <StyledLink to="/group/1/admin/items">
              <Card>
                <CardContent>
                  <Typography align="center" variant="subtitle1">
                    Tárgyak
                  </Typography>
                </CardContent>
              </Card>
            </StyledLink>
          </Grid>
          <Grid item xs={12}>
            {/* TODO link to actual group */}
            <StyledLink to="/group/1/admin/storages">
              <Card>
                <CardContent>
                  <Typography align="center" variant="subtitle1">
                    Leltárak
                  </Typography>
                </CardContent>
              </Card>
            </StyledLink>
          </Grid>
          <Grid item xs={12}>
            {/* TODO link to actual group */}
            <StyledLink to="/group/1/admin/documents">
              <Card>
                <CardContent>
                  <Typography align="center" variant="subtitle1">
                    Dokumentumok
                  </Typography>
                </CardContent>
              </Card>
            </StyledLink>
          </Grid>
          <Grid item xs={12}>
            {/* TODO link to actual group */}
            <StyledLink to="/group/1/admin/rentals">
              <Card>
                <CardContent>
                  <Typography align="center" variant="subtitle1">
                    Kölcsönzések
                  </Typography>
                </CardContent>
              </Card>
            </StyledLink>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};