PageHeading
The title, description and action of personal tool pages such as My plans.
import { PageHeading } from '@iffday/ui';Example
The heading of personal tool pages: a 35px title and a description on the left, one action on the right, aligned at the bottom. My plans, My tickets, Film diary, Friends and lists, list pages and the CMS dashboard use it. Browsing pages such as Feed, Screenings, Search and the festival directory use DisplayTitle.
My tickets
Tickets, seats and attachments are visible only to you. Adding a ticket does not mark a film as watched or purchase an official ticket.
import { useT } from '@iffday/i18n';
import { Button, PageHeading } from '@iffday/ui';
export default function Example() {
const t = useT();
return (
<div style={{ width: '100%' }}>
<PageHeading
title={t('nav.page.myTickets')}
description={t('plan.personal.ticketsSeatsAndAttachmentsAreVisibleOnlyToYou')}
action={
<Button type="button" className="button primary small">
{t('common.add')}
</Button>
}
/>
</div>
);
}Props
PageHeading
packages/ui/src/layout.tsx:22| Prop | Type | Default |
|---|---|---|
eyebrow | string | |
title* | string | |
description | string | |
action | ReactNode |