58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { FormattedMessage } from 'react-intl';
|
|
|
|
import type { ApiAnnualReportState } from '@/mastodon/api/annual_report';
|
|
import { Button } from '@/mastodon/components/button';
|
|
|
|
import styles from './styles.module.scss';
|
|
|
|
export interface AnnualReportAnnouncementProps {
|
|
year: string;
|
|
state: Exclude<ApiAnnualReportState, 'ineligible'>;
|
|
onRequestBuild: () => void;
|
|
onOpen?: () => void; // This is optional when inside the modal, as it won't be shown then.
|
|
onDismiss: () => void;
|
|
}
|
|
|
|
export const AnnualReportAnnouncement: React.FC<
|
|
AnnualReportAnnouncementProps
|
|
> = ({ year, state, onRequestBuild, onOpen, onDismiss }) => {
|
|
return (
|
|
<div className={styles.wrapper} data-color-scheme='dark'>
|
|
<FormattedMessage
|
|
id='annual_report.announcement.title'
|
|
defaultMessage='Wrapstodon {year} has arrived'
|
|
values={{ year }}
|
|
tagName='h2'
|
|
/>
|
|
<FormattedMessage
|
|
id='annual_report.announcement.description'
|
|
defaultMessage='Discover more about your engagement on Mastodon over the past year.'
|
|
tagName='p'
|
|
/>
|
|
{state === 'available' ? (
|
|
<Button onClick={onOpen}>
|
|
<FormattedMessage
|
|
id='annual_report.announcement.action_view'
|
|
defaultMessage='View my Wrapstodon'
|
|
/>
|
|
</Button>
|
|
) : (
|
|
<Button loading={state === 'generating'} onClick={onRequestBuild}>
|
|
<FormattedMessage
|
|
id='annual_report.announcement.action_build'
|
|
defaultMessage='Build my Wrapstodon'
|
|
/>
|
|
</Button>
|
|
)}
|
|
{state === 'eligible' && (
|
|
<Button onClick={onDismiss} plain className={styles.closeButton}>
|
|
<FormattedMessage
|
|
id='annual_report.announcement.action_dismiss'
|
|
defaultMessage='No thanks'
|
|
/>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|