43 lines
1.5 KiB
JavaScript
43 lines
1.5 KiB
JavaScript
import { h } from 'preact'
|
|
import { format } from 'date-fns'
|
|
import Link from '../Link'
|
|
import { H2, H3, Label } from '../Text'
|
|
import strings from '../../data/strings'
|
|
import { andList } from '../../helpers/string'
|
|
import { colours } from '../../assets/theme'
|
|
import { Img, Left, Right, Center, Title, Row, Column, StyledButton as Button } from './styles'
|
|
import { useEventApi } from '../../hooks/data'
|
|
|
|
const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => {
|
|
const { data: { series: allSeries } } = useEventApi()
|
|
|
|
const series = seriesId ? allSeries.filter(({ id }) => id === seriesId)[0] : {}
|
|
const hosts = series.hosts ? series.hosts.map(host => host.actor.name) : null
|
|
const startTime = format(new Date(beginsOn), 'ha')
|
|
|
|
|
|
return (
|
|
<Row align="stretch" {...rest}>
|
|
<Left>
|
|
<Link to={`/series/${series.slug}#${id}`}><Img src={image} /></Link>
|
|
<Button>Play now</Button>
|
|
</Left>
|
|
<Center justify="space-betweeen">
|
|
<Title size={24} colour={colours.rose} weight="500">{title}</Title>
|
|
<div>
|
|
<H3 weight="500" colour={colours.rose}>From: <Link textProps={{
|
|
weight: '700'
|
|
}} to={`/series/${series.slug}`}>{`${series.title}: ${series.subtitle}`}</Link></H3>
|
|
{hosts ? <Label size={16} colour={colours.rose}>— {andList(hosts)}</Label> : null}
|
|
</div>
|
|
</Center>
|
|
<Right>
|
|
<Label size={24} colour={colours.rose} weight="600">{startTime}</Label>
|
|
</Right>
|
|
</Row>
|
|
)
|
|
}
|
|
|
|
|
|
export default EpisodeCard
|