Skip to content

Instantly share code, notes, and snippets.

@tomsansome
Created April 27, 2018 09:28
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tomsansome/ef2604c2d3bb568f1a74dde06a04f5d6 to your computer and use it in GitHub Desktop.
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