nas/app/javascript/mastodon/components/searchability_icon.tsx

80 lines
2.2 KiB
TypeScript

import { defineMessages, useIntl } from 'react-intl';
import AlternateEmailIcon from 'mastodon/../material-icons/400-24px/alternate_email.svg?react';
import PublicUnlistedIcon from 'mastodon/../material-icons/400-24px/cloud.svg?react';
import LockIcon from 'mastodon/../material-icons/400-24px/lock.svg?react';
import LockOpenIcon from 'mastodon/../material-icons/400-24px/no_encryption.svg?react';
import PublicIcon from 'mastodon/../material-icons/400-24px/public.svg?react';
import { Icon } from './icon';
type Searchability =
| 'public'
| 'public_unlisted'
| 'private'
| 'direct'
| 'limited';
const messages = defineMessages({
public_short: { id: 'searchability.public.short', defaultMessage: 'Public' },
public_unlisted_short: {
id: 'searchability.public_unlisted.short',
defaultMessage: 'Public unlisted',
},
private_short: {
id: 'searchability.unlisted.short',
defaultMessage: 'Followers',
},
direct_short: {
id: 'searchability.private.short',
defaultMessage: 'Reactionners',
},
limited_short: {
id: 'searchability.direct.short',
defaultMessage: 'Self only',
},
});
export const SearchabilityIcon: React.FC<{ searchability: Searchability }> = ({
searchability,
}) => {
const intl = useIntl();
const searchabilityIconInfo = {
public: {
icon: 'globe',
iconComponent: PublicIcon,
text: intl.formatMessage(messages.public_short),
},
public_unlisted: {
icon: 'cloud',
iconComponent: PublicUnlistedIcon,
text: intl.formatMessage(messages.public_unlisted_short),
},
private: {
icon: 'lock',
iconComponent: LockOpenIcon,
text: intl.formatMessage(messages.private_short),
},
limited: {
icon: 'get-pocket',
iconComponent: AlternateEmailIcon,
text: intl.formatMessage(messages.limited_short),
},
direct: {
icon: 'at',
iconComponent: LockIcon,
text: intl.formatMessage(messages.direct_short),
},
};
const searchabilityIcon = searchabilityIconInfo[searchability];
return (
<Icon
id={searchabilityIcon.icon}
icon={searchabilityIcon.iconComponent}
title={searchabilityIcon.text}
/>
);
};