You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.8 KiB
62 lines
1.8 KiB
import { defineMessages, useIntl } from 'react-intl'; |
|
|
|
import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg'; |
|
import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg'; |
|
import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg'; |
|
import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg'; |
|
|
|
import { Icon } from './icon'; |
|
|
|
type Visibility = 'public' | 'unlisted' | 'private' | 'direct'; |
|
|
|
const messages = defineMessages({ |
|
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, |
|
unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, |
|
private_short: { |
|
id: 'privacy.private.short', |
|
defaultMessage: 'Followers only', |
|
}, |
|
direct_short: { |
|
id: 'privacy.direct.short', |
|
defaultMessage: 'Mentioned people only', |
|
}, |
|
}); |
|
|
|
export const VisibilityIcon: React.FC<{ visibility: Visibility }> = ({ |
|
visibility, |
|
}) => { |
|
const intl = useIntl(); |
|
|
|
const visibilityIconInfo = { |
|
public: { |
|
icon: 'globe', |
|
iconComponent: PublicIcon, |
|
text: intl.formatMessage(messages.public_short), |
|
}, |
|
unlisted: { |
|
icon: 'unlock', |
|
iconComponent: LockOpenIcon, |
|
text: intl.formatMessage(messages.unlisted_short), |
|
}, |
|
private: { |
|
icon: 'lock', |
|
iconComponent: LockIcon, |
|
text: intl.formatMessage(messages.private_short), |
|
}, |
|
direct: { |
|
icon: 'at', |
|
iconComponent: AlternateEmailIcon, |
|
text: intl.formatMessage(messages.direct_short), |
|
}, |
|
}; |
|
|
|
const visibilityIcon = visibilityIconInfo[visibility]; |
|
|
|
return ( |
|
<Icon |
|
id={visibilityIcon.icon} |
|
icon={visibilityIcon.iconComponent} |
|
title={visibilityIcon.text} |
|
/> |
|
); |
|
};
|
|
|