matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add popover component

Browse Source
This commit is contained in:
Chewbacca
2023-03-14 15:58:11 -04:00
parent af69c7564e
commit 283935e837
4 changed files with 148 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/soapbox/features/group/components/group-privacy.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { HStack, Icon, Text } from 'soapbox/components/ui';
import { HStack, Icon, Popover, Stack, Text } from 'soapbox/components/ui';
import { Group } from 'soapbox/types/entities';
interface IGroupPolicy {
@@ -9,24 +9,59 @@ interface IGroupPolicy {
}
const GroupPrivacy = ({ group }: IGroupPolicy) => (
<HStack space={1} alignItems='center' data-testid='group-privacy'>
<Icon
className='h-4 w-4'
src={
group.locked
? require('@tabler/icons/lock.svg')
: require('@tabler/icons/world.svg')
}
/>
<Popover
content={
<Stack space={4} alignItems='center' className='w-72'>
<div className='rounded-full bg-gray-200 p-3 dark:bg-gray-800'>
<Icon
src={
group.locked
? require('@tabler/icons/lock.svg')
: require('@tabler/icons/world.svg')
}
className='h-6 w-6 text-gray-600 dark:text-gray-600'
/>
</div>
<Text theme='inherit' tag='span' size='sm' weight='medium'>
{group.locked ? (
<FormattedMessage id='group.privacy.locked' defaultMessage='Private' />
) : (
<FormattedMessage id='group.privacy.public' defaultMessage='Public' />
)}
</Text>
</HStack>
<Stack space={1} alignItems='center'>
<Text size='lg' weight='bold' align='center'>
{group.locked ? (
<FormattedMessage id='group.privacy.locked.full' defaultMessage='Private Group' />
) : (
<FormattedMessage id='group.privacy.public.full' defaultMessage='Public Group' />
)}
</Text>
<Text theme='muted' align='center'>
{group.locked ? (
<FormattedMessage id='group.privacy.locked.info' defaultMessage='Discoverable. Users can join after their request is approved.' />
) : (
<FormattedMessage id='group.privacy.public.info' defaultMessage='Discoverable. Anyone can join.' />
)}
</Text>
</Stack>
</Stack>
}
>
<HStack space={1} alignItems='center' data-testid='group-privacy'>
<Icon
className='h-4 w-4'
src={
group.locked
? require('@tabler/icons/lock.svg')
: require('@tabler/icons/world.svg')
}
/>
<Text theme='inherit' tag='span' size='sm' weight='medium'>
{group.locked ? (
<FormattedMessage id='group.privacy.locked' defaultMessage='Private' />
) : (
<FormattedMessage id='group.privacy.public' defaultMessage='Public' />
)}
</Text>
</HStack>
</Popover>
);
export default GroupPrivacy;