48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { useCallback } from 'react';
|
|
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
|
|
import { unblockDomain } from 'flavours/glitch/actions/domain_blocks';
|
|
import { useAppDispatch } from 'flavours/glitch/store';
|
|
|
|
import { IconButton } from './icon_button';
|
|
|
|
const messages = defineMessages({
|
|
unblockDomain: {
|
|
id: 'account.unblock_domain',
|
|
defaultMessage: 'Unblock domain {domain}',
|
|
},
|
|
});
|
|
|
|
export const Domain: React.FC<{
|
|
domain: string;
|
|
}> = ({ domain }) => {
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const handleDomainUnblock = useCallback(() => {
|
|
dispatch(unblockDomain(domain));
|
|
}, [dispatch, domain]);
|
|
|
|
return (
|
|
<div className='domain'>
|
|
<div className='domain__wrapper'>
|
|
<span className='domain__domain-name'>
|
|
<strong>{domain}</strong>
|
|
</span>
|
|
|
|
<div className='domain__buttons'>
|
|
<IconButton
|
|
active
|
|
icon='unlock'
|
|
iconComponent={LockOpenIcon}
|
|
title={intl.formatMessage(messages.unblockDomain, { domain })}
|
|
onClick={handleDomainUnblock}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|