import { defineMessages, useIntl } from 'react-intl'; 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 MailIcon } from '@material-symbols/svg-600/outlined/mail.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: 'envelope', iconComponent: MailIcon, text: intl.formatMessage(messages.direct_short), }, }; const visibilityIcon = visibilityIconInfo[visibility]; return ( ); };