EventTicketsDescription.tsx
2 years ago
EventTicketsHeader.tsx
1 year ago
EventTicketsList.tsx
1 year ago
EventTicketsListItem.tsx
1 year ago
types.ts
1 year ago
EventTicketsHeader.tsx
30 lines
| 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 |