1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- import { defineMessages, useIntl } from 'react-intl';
- import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
- import LockIcon from '@/material-icons/400-24px/lock.svg?react';
- import PublicIcon from '@/material-icons/400-24px/public.svg?react';
- import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
- 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: 'Quiet public',
- },
- private_short: {
- id: 'privacy.private.short',
- defaultMessage: 'Followers',
- },
- direct_short: {
- id: 'privacy.direct.short',
- defaultMessage: 'Specific people',
- },
- });
- 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: QuietTimeIcon,
- 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}
- />
- );
- };
|