Skip to content

Instantly share code, notes, and snippets.

@jsmanifest
Created June 29, 2019 19:26
Show Gist options
  • Save jsmanifest/0ced9605dabbda12a9565b9477b92ec3 to your computer and use it in GitHub Desktop.
Save jsmanifest/0ced9605dabbda12a9565b9477b92ec3 to your computer and use it in GitHub Desktop.
const SectionContainer = ({
bgProps,
height = 500,
header,
headerProps,
imgProps,
}) => (
<Background {...bgProps}>
<Section height={height}>
<Grid spacing={16} container>
<Grid xs={12} sm={6} item>
<div {...headerProps}>
<Header center>{header}</Header>
</div>
</Grid>
<Grid xs={12} sm={6} item>
<div>
<img {...imgProps} />
</div>
</Grid>
</Grid>
</Section>
</Background>
)
const SomeComponent = () => (
<Body noBottom>
<Header center>Title</Header>
<Divider />
<SectionContainer
header="Groups"
headerProps={{ className: classes.groupsHeader }}
imgProps={{ src: photos.groups, className: classes.img }}
/>
<SectionContainer
bgProps={{ grey: true }}
header="Labs"
headerProps={{ className: classes.labsHeader }}
imgProps={{ src: photos.labs, className: classes.img }}
/>
<SectionContainer
height={300}
header="Partners"
headerProps={{ className: classes.partnersHeader }}
imgProps={{ src: photos.partners, className: classes.img }}
/>
</Body>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment