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;