diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx index efddd24d8..90651fb78 100644 --- a/app/soapbox/components/ui/streamfield/streamfield.tsx +++ b/app/soapbox/components/ui/streamfield/streamfield.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useIntl, defineMessages } from 'react-intl'; import Button from '../button/button'; import HStack from '../hstack/hstack'; @@ -6,6 +7,11 @@ import IconButton from '../icon-button/icon-button'; import Stack from '../stack/stack'; import Text from '../text/text'; +const messages = defineMessages({ + add: { id: 'streamfield.add', defaultMessage: 'Add' }, + remove: { id: 'streamfield.remove', defaultMessage: 'Remove' }, +}); + interface IStreamfield { /** Array of values for the streamfield. */ values: any[], @@ -36,6 +42,7 @@ const Streamfield: React.FC = ({ component: Component, maxItems = Infinity, }) => { + const intl = useIntl(); const handleChange = (i: number) => { return (value: any) => { @@ -62,6 +69,7 @@ const Streamfield: React.FC = ({ className='bg-transparent text-gray-400 hover:text-gray-600' src={require('@tabler/icons/icons/x.svg')} onClick={() => onRemoveItem(i)} + title={intl.formatMessage(messages.remove)} /> )} @@ -76,7 +84,7 @@ const Streamfield: React.FC = ({ theme='ghost' block > - Add + {intl.formatMessage(messages.add)} )}