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; |