soapbox/app/soapbox/features/ui/components/panels/new-event-panel.tsx

40 wiersze
1.1 KiB
TypeScript

import React from 'react';
import { FormattedMessage } from 'react-intl';
import { openModal } from 'soapbox/actions/modals';
import { Button, Stack, Text } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
const NewEventPanel = () => {
const dispatch = useAppDispatch();
const createEvent = () => {
dispatch(openModal('COMPOSE_EVENT'));
};
return (
<Stack space={2}>
<Stack>
<Text size='lg' weight='bold'>
<FormattedMessage id='new_event_panel.title' defaultMessage='Create New Event' />
</Text>
<Text theme='muted' size='sm'>
<FormattedMessage id='new_event_panel.subtitle' defaultMessage="Can't find what you're looking for? Schedule your own event." />
</Text>
</Stack>
<Button
icon={require('@tabler/icons/calendar-event.svg')}
onClick={createEvent}
theme='secondary'
block
>
<FormattedMessage id='new_event_panel.action' defaultMessage='Create event' />
</Button>
</Stack>
);
};
export default NewEventPanel;