42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import { Modal, Stack, Text, Input } from 'soapbox/components/ui';
|
|
|
|
import type { Status } from 'soapbox/types/entities';
|
|
|
|
interface IEmbedModal {
|
|
status: Status,
|
|
}
|
|
|
|
const EmbedModal: React.FC<IEmbedModal> = ({ status }) => {
|
|
const url = `${location.origin}/embed/${status.id}`;
|
|
const embed = `<iframe src="${url}" width="100%" height="300" frameborder="0" />`;
|
|
|
|
const handleInputClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
|
|
e.currentTarget.select();
|
|
};
|
|
|
|
return (
|
|
<Modal title={<FormattedMessage id='status.embed' defaultMessage='Embed' />}>
|
|
<Stack space={4}>
|
|
<Stack>
|
|
<Text theme='muted' size='sm'>
|
|
<FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
|
|
</Text>
|
|
|
|
<Input
|
|
type='text'
|
|
readOnly
|
|
value={embed}
|
|
onClick={handleInputClick}
|
|
/>
|
|
</Stack>
|
|
|
|
<div dangerouslySetInnerHTML={{ __html: embed }} />
|
|
</Stack>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default EmbedModal;
|