Add NewEventPanel to events list page

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

app/soapbox/features/events/index.tsx

@@ -36,7 +36,7 @@ const Events = () => {
       <HStack className='mb-4' space={2} justifyContent='between'>
         <CardTitle title={<FormattedMessage id='events.recent_events' defaultMessage='Recent events' />} />
         <Button
-          className='ml-auto'
+          className='ml-auto xl:hidden'
           theme='primary'
           size='sm'
           onClick={onComposeEvent}

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;

app/soapbox/features/ui/index.tsx

@@ -29,6 +29,7 @@ import AdminPage from 'soapbox/pages/admin-page';
 import ChatsPage from 'soapbox/pages/chats-page';
 import DefaultPage from 'soapbox/pages/default-page';
 import EventPage from 'soapbox/pages/event-page';
+import EventsPage from 'soapbox/pages/events-page';
 import GroupPage from 'soapbox/pages/group-page';
 import GroupsPage from 'soapbox/pages/groups-page';
 import HomePage from 'soapbox/pages/home-page';
@@ -254,7 +255,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/search' page={DefaultPage} component={Search} content={children} />
       {features.suggestions && <WrappedRoute path='/suggestions' publicRoute page={DefaultPage} component={FollowRecommendations} content={children} />}
       {features.profileDirectory && <WrappedRoute path='/directory' publicRoute page={DefaultPage} component={Directory} content={children} />}
-      {features.events && <WrappedRoute path='/events' page={DefaultPage} component={Events} content={children} />}
+      {features.events && <WrappedRoute path='/events' page={EventsPage} component={Events} content={children} />}
 
       {features.chats && <WrappedRoute path='/chats' exact page={ChatsPage} component={ChatIndex} content={children} />}
       {features.chats && <WrappedRoute path='/chats/new' page={ChatsPage} component={ChatIndex} content={children} />}

app/soapbox/features/ui/util/async-components.ts

@@ -577,3 +577,7 @@ export function NewGroupPanel() {
 export function GroupMediaPanel() {
   return import(/* webpackChunkName: "features/groups" */'../components/group-media-panel');
 }
+
+export function NewEventPanel() {
+  return import(/* webpackChunkName: "features/events" */'../components/panels/new-event-panel');
+}