42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import Linkify from 'linkify-react';
|
||
|
|
import * as css from './style.css';
|
||
|
|
import { LINKIFY_OPTS, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
|
||
|
|
|
||
|
|
export const RoomTopicViewer = as<
|
||
|
|
'div',
|
||
|
|
{
|
||
|
|
name: string;
|
||
|
|
topic: string;
|
||
|
|
requestClose: () => void;
|
||
|
|
}
|
||
|
|
>(({ name, topic, requestClose, className, ...props }, ref) => (
|
||
|
|
<Modal
|
||
|
|
size="300"
|
||
|
|
flexHeight
|
||
|
|
className={classNames(css.ModalFlex, className)}
|
||
|
|
{...props}
|
||
|
|
ref={ref}
|
||
|
|
>
|
||
|
|
<Header className={css.ModalHeader} variant="Surface" size="500">
|
||
|
|
<Box grow="Yes">
|
||
|
|
<Text size="H4" truncate>
|
||
|
|
{name}
|
||
|
|
</Text>
|
||
|
|
</Box>
|
||
|
|
<IconButton size="300" onClick={requestClose} radii="300">
|
||
|
|
<Icon src={Icons.Cross} />
|
||
|
|
</IconButton>
|
||
|
|
</Header>
|
||
|
|
<Scroll className={css.ModalScroll} size="300" hideTrack>
|
||
|
|
<Box className={css.ModalContent} direction="Column" gap="100">
|
||
|
|
<Text size="T300" className={css.ModalTopic} priority="400">
|
||
|
|
<Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topic)}</Linkify>
|
||
|
|
</Text>
|
||
|
|
</Box>
|
||
|
|
</Scroll>
|
||
|
|
</Modal>
|
||
|
|
));
|