Add NewEventPanel to events list page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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

@@ -0,0 +1,39 @@
+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;