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

44 wiersze
1.3 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, useAppSelector } from 'soapbox/hooks';
import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions';
const NewGroupPanel = () => {
const dispatch = useAppDispatch();
const canCreateGroup = useAppSelector((state) => hasPermission(state, PERMISSION_CREATE_GROUPS));
const createGroup = () => {
dispatch(openModal('MANAGE_GROUP'));
};
if (!canCreateGroup) return null;
return (
<Stack space={2}>
<Stack>
<Text size='lg' weight='bold'>
<FormattedMessage id='new_group_panel.title' defaultMessage='Create Group' />
</Text>
<Text theme='muted' size='sm'>
<FormattedMessage id='new_group_panel.subtitle' defaultMessage="Can't find what you're looking for? Start your own private or public group." />
</Text>
</Stack>
<Button
onClick={createGroup}
theme='secondary'
block
>
<FormattedMessage id='new_group_panel.action' defaultMessage='Create Group' />
</Button>
</Stack>
);
};
export default NewGroupPanel;