| 1 |
import {__} from '@wordpress/i18n'; |
| 2 |
import {format} from 'date-fns'; |
| 3 |
|
| 4 |
/** |
| 5 |
* @since 3.20.0 Show "ENDED" badge once the event has ended. |
| 6 |
* @since 3.6.0 |
| 7 |
*/ |
| 8 |
export default function EventTicketsHeader({title, startDateTime, endDateTime}) { |
| 9 |
const fullDate = format(startDateTime, 'EEEE, MMMM do, hh:mmaaa'); |
| 10 |
const day = format(startDateTime, 'dd'); |
| 11 |
const month = format(startDateTime, 'MMM'); |
| 12 |
const hasEnded = endDateTime < new Date(); |
| 13 |
|
| 14 |
return ( |
| 15 |
<div className={'givewp-event-tickets__header'}> |
| 16 |
<div className={'givewp-event-tickets__header__date'}> |
| 17 |
{day} <span>{month}</span> |
| 18 |
</div> |
| 19 |
<h4 className={'givewp-event-tickets__header__title'}>{title}</h4> |
| 20 |
<p className={'givewp-event-tickets__header__full-date'}>{fullDate}</p> |
| 21 |
|
| 22 |
{hasEnded && ( |
| 23 |
<div className={'givewp-event-tickets__header__ended'}> |
| 24 |
<span>{__('Ended', 'give')}</span> |
| 25 |
</div> |
| 26 |
)} |
| 27 |
</div> |
| 28 |
); |
| 29 |
} |
| 30 |
|
