44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import type { FC } from 'react';
|
|
|
|
import type { IntlShape } from 'react-intl';
|
|
import { defineMessages } from 'react-intl';
|
|
|
|
import { Icon } from '@/mastodon/components/icon';
|
|
import DisabledIcon from '@/material-icons/400-24px/close-fill.svg?react';
|
|
import EnabledIcon from '@/material-icons/400-24px/done-fill.svg?react';
|
|
|
|
const messages = defineMessages({
|
|
enabled: { id: 'about.enabled', defaultMessage: 'Enabled' },
|
|
disabled: { id: 'about.disabled', defaultMessage: 'Disabled' },
|
|
});
|
|
|
|
interface CapabilityIconProps {
|
|
intl: IntlShape;
|
|
state: boolean;
|
|
}
|
|
|
|
export const CapabilityIcon: FC<CapabilityIconProps> = ({ intl, state }) => {
|
|
if (state) {
|
|
return (
|
|
<span className='capability-icon enabled'>
|
|
<Icon
|
|
id='check'
|
|
icon={EnabledIcon}
|
|
title={intl.formatMessage(messages.enabled)}
|
|
/>
|
|
{intl.formatMessage(messages.enabled)}
|
|
</span>
|
|
);
|
|
} else {
|
|
return (
|
|
<span className='capability-icon disabled'>
|
|
<Icon
|
|
id='times'
|
|
icon={DisabledIcon}
|
|
title={intl.formatMessage(messages.disabled)}
|
|
/>
|
|
{intl.formatMessage(messages.disabled)}
|
|
</span>
|
|
);
|
|
}
|
|
};
|