All files / src/apps/organisations/components OrgDetails.tsx

33.33% Statements 2/6
0% Branches 0/8
0% Functions 0/2
40% Lines 2/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66                  1x                 1x                                                                                              
import React from "react";
import { Typography, List, Paper, ListItem, Grid } from "@mui/material";
import { makeStyles } from "@mui/styles";
 
import { APIOrganisation } from "../types";
interface Props {
  organisation: APIOrganisation;
}
 
const useStyles = makeStyles(() => ({
  listItem: {
    display: "flex"
  },
  name: {
    marginRight: "1rem"
  }
}));
 
const OrganisationDetails: React.FC<Props> = ({ organisation }: Props) => {
  const { website, location, company, public_access, name } =
    organisation || {};
  const classes = useStyles();
  return (
    <Grid item xs={12} component="div">
      <Paper className="fieldsetParent">
        <fieldset>
          <Typography component="legend" variant="h5" gutterBottom>
            Details
          </Typography>
 
          <List>
            <ListItem className={classes.listItem}>
              <strong className={classes.name}>Name</strong>
              <span>{name}</span>
            </ListItem>
            {company && (
              <ListItem className={classes.listItem}>
                <strong className={classes.name}>Company</strong>
                <span>{company}</span>
              </ListItem>
            )}
            {website && (
              <ListItem className={classes.listItem}>
                <strong className={classes.name}>Website</strong>{" "}
                <span>{website}</span>
              </ListItem>
            )}
            {location && (
              <ListItem className={classes.listItem}>
                <strong className={classes.name}>Location</strong>{" "}
                <span>{location}</span>
              </ListItem>
            )}
            <ListItem className={classes.listItem}>
              <strong className={classes.name}>Public Access</strong>{" "}
              <span>{public_access}</span>
            </ListItem>
          </List>
        </fieldset>
      </Paper>
    </Grid>
  );
};
 
export default OrganisationDetails;