Skip to content

Instantly share code, notes, and snippets.

@linxlad
Last active June 30, 2017 11:27
Show Gist options
  • Save linxlad/ceff69fe80c272f6568249a5c1f4c06f to your computer and use it in GitHub Desktop.
Save linxlad/ceff69fe80c272f6568249a5c1f4c06f to your computer and use it in GitHub Desktop.
Homeslice Component using semantic UI
import React, { PureComponent } from 'react';
import { Container, Header, Grid, Image} from 'semantic-ui-react';
import './HomeSlice.scss';
export class HomeSlice extends PureComponent {
render() {
const {heading, image, context, reverse} = this.props;
const imageTag = <Image size="large" className="homeSlice--image" src={image}/>;
const text = context.split('<br />').map((item, key) => {
return <span key={key}>{item.trim()}<br/></span>;
});
let order = [
{ type: 0, element: imageTag, class: 'homeSlice-media' },
{ type: 1, element: text, class: 'homeSlice-context' }
];
if (reverse) {
order = [
{ type: 1, element: text, class: 'homeSlice-context' },
{ type: 0, element: imageTag, class: 'homeSlice-media' }
];
}
return (
<section className="homeSlice">
<Container type="text">
<Grid columns={2}>
<Grid.Row>
<Grid.Column className={order[0].class} floated='left'>
{order[0].type === 1 ? <Header as='h2'>{heading}</Header> : ''}
{order[0].type === 1 ? <Header.Subheader as='p'>{order[0].element}</Header.Subheader> : order[0].element}
</Grid.Column>
<Grid.Column className={order[1].class} floated='right'>
{order[0].type === 0 ? <Header as='h2'>{heading}</Header> : ''}
{order[0].type === 0 ? <Header.Subheader as='p'>{order[1].element}</Header.Subheader> : order[1].element}
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
</section>
);
}
}
export default HomeSlice;
.homeSlice {
.homeSlice-media{
text-align: right;
}
.homeSlice-context {
top: 50%;
transform: translateY(-25%);
vertical-align: middle;
h2 {
font-size: 34px;
font-weight: lighter;
}
.sub.header {
font-size: 18px;
}
}
}
import image from '../assets/images/some-image.jpg';
<HomeSlice
heading="Simple and free"
image={image}
context="Sub heading"
reverse={false|true}
/>
# https://cl.ly/lNJo
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment