import { Component } from 'react' | |
import config from './../config' | |
import BackgroundImage from './BackgroundImage' | |
import classnames from 'classnames' | |
import Markdown from 'react-markdown' | |
export default class WorkItem extends Component { | |
state = { | |
open: false | |
} | |
onLogoClicked = () => { | |
const { open } = this.state | |
this.setState({ | |
open: open ? false : true | |
}) | |
} | |
render () { | |
const { item } = this.props | |
const title = item.fields.title | |
const excerpt = item.fields.excerpt | |
const backgroundImage = item.fields.featuredImage | |
const colour = item.fields.colour | |
const logo = item.fields.logo | |
const logoWidth = item.fields.logoWidth | |
const link = item.fields.link | |
const { open, toggledInfoBefore } = this.state | |
const itemClassnames = classnames({ | |
'work-feed__item': true, | |
'work-feed__item--open': open | |
}) | |
return ( | |
<article className={itemClassnames} style={{ backgroundColor: `#${colour}` }}> | |
<BackgroundImage image={backgroundImage} movedUp={open} /> | |
<div className='work-feed__details'> | |
<div className='work-feed__logo-container' onClick={this.onLogoClicked}> | |
{logo ? ( | |
<div> | |
<img className='work-feed__logo' src={logo.fields.file.url} alt={title} style={{ width: `${logoWidth}px` }} /> | |
<div className={toggleClassnames}> | |
<span className='work-feed__indicator-copy'>Toggle info</span> | |
</div> | |
</div> | |
) : null} | |
</div> | |
</div> | |
<div className='work-feed__info'> | |
<h1 className='work-feed__title'>{title}</h1> | |
<div className='work-feed__excerpt'> | |
<Markdown source={excerpt} /> | |
</div> | |
{link ? ( | |
<a className='work-feed__link' href={link} target='_blank'> | |
<span className='work-feed__link-copy'>Visit site</span> | |
<img className='work-feed__link-icon' src={`${config.paths.static}/img/ui/external-link.svg`} /> | |
</a> | |
) : null} | |
</div> | |
</article> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment