Added NewsItem component for Gab News
• Added: - NewsItem component for Gab News
This commit is contained in:
parent
34f1f778cd
commit
2297c18ec4
60
app/javascript/gabsocial/components/news_item.js
Normal file
60
app/javascript/gabsocial/components/news_item.js
Normal file
@ -0,0 +1,60 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import { DEFAULT_REL } from '../constants'
|
||||
import Button from './button'
|
||||
import RelativeTimestamp from './relative_timestamp'
|
||||
import Text from './text'
|
||||
import Image from './image'
|
||||
|
||||
class NewsItem extends ImmutablePureComponent {
|
||||
|
||||
render() {
|
||||
const { news } = this.props
|
||||
|
||||
if (!news) return null
|
||||
|
||||
const title = news.get('title')
|
||||
const url = news.get('url')
|
||||
|
||||
if (!title || !url) return null
|
||||
|
||||
return (
|
||||
<Button
|
||||
noClasses
|
||||
href={url}
|
||||
target='_blank'
|
||||
rel={DEFAULT_REL}
|
||||
className={[_s.d, _s.bgPrimary, _s.radiusSmall, _s.mr15, _s.overflowHidden, _s.h260PX, _s.w330PX].join(' ')}
|
||||
>
|
||||
<Image
|
||||
src={news.get('image')}
|
||||
className={[_s.h100PC, _s.w100PC, _s.left0, _s.top0, _s.right0, _s.bottom0, _s.posAbs, _s.z1].join(' ')}
|
||||
/>
|
||||
<div className={[_s.d, _s.newsBackground, _s.h100PC, _s.w100PC, _s.top0, _s.left0, _s.right0, _s.bottom0, _s.posAbs, _s.z2].join(' ')}>
|
||||
<div className={[_s.d, _s.w100PC, _s.px15, _s.pb15, _s.left0, _s.right0, _s.bottom0, _s.posAbs, _s.z2].join(' ')}>
|
||||
<Text color='white' size='large' weight='medium'>
|
||||
{title}
|
||||
</Text>
|
||||
<div className={[_s.d, _s.flexRow, _s.mt5].join(' ')}>
|
||||
<Text color='white' size='small' className={_s.mr5}>
|
||||
<RelativeTimestamp timestamp={news.get('publish_date')} />
|
||||
</Text>
|
||||
<Text color='white' size='small'>
|
||||
· Click to read
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
NewsItem.propTypes = {
|
||||
news: ImmutablePropTypes.map,
|
||||
}
|
||||
|
||||
export default NewsItem
|
Loading…
Reference in New Issue
Block a user