# give/4.16.9/src/EventTickets/resources/components/EventTicketsHeader.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.16.9. 30 lines.

- Page: https://pluginprobe.com/plugins/give/4.16.9/code/src/EventTickets/resources/components/EventTicketsHeader.tsx
- Raw: https://pluginprobe.com/plugins/give/4.16.9/raw/src/EventTickets/resources/components/EventTicketsHeader.tsx
- Modified: 2025-02-03T15:13:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.16.9/code/src/EventTickets/resources/components/EventTicketsHeader.tsx#L10-L20`.

```tsx
import {__} from '@wordpress/i18n';
import {format} from 'date-fns';

/**
 * @since 3.20.0 Show "ENDED" badge once the event has ended.
 * @since 3.6.0
 */
export default function EventTicketsHeader({title, startDateTime, endDateTime}) {
    const fullDate = format(startDateTime, 'EEEE, MMMM do, hh:mmaaa');
    const day = format(startDateTime, 'dd');
    const month = format(startDateTime, 'MMM');
    const hasEnded = endDateTime < new Date();

    return (
        <div className={'givewp-event-tickets__header'}>
            <div className={'givewp-event-tickets__header__date'}>
                {day} <span>{month}</span>
            </div>
            <h4 className={'givewp-event-tickets__header__title'}>{title}</h4>
            <p className={'givewp-event-tickets__header__full-date'}>{fullDate}</p>

            {hasEnded && (
                <div className={'givewp-event-tickets__header__ended'}>
                    <span>{__('Ended', 'give')}</span>
                </div>
            )}
        </div>
    );
}

```