44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
import { Show } from 'solid-js'
|
||
|
|
import styles from './QuotedMessage.module.scss'
|
||
|
|
import { Icon } from '../_shared/Icon'
|
||
|
|
import { clsx } from 'clsx'
|
||
|
|
|
||
|
|
type QuotedMessage = {
|
||
|
|
body: string
|
||
|
|
cancel?: () => void
|
||
|
|
author?: string
|
||
|
|
variant: 'inline' | 'reply'
|
||
|
|
isOwn?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const QuotedMessage = (props: QuotedMessage) => {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
class={clsx(styles.QuotedMessage, {
|
||
|
|
[styles.reply]: props.variant === 'reply',
|
||
|
|
[styles.inline]: props.variant === 'inline',
|
||
|
|
[styles.own]: props.isOwn
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
<Show when={props.variant === 'reply'}>
|
||
|
|
<div class={styles.icon}>
|
||
|
|
<Icon name="chat-reply" />
|
||
|
|
</div>
|
||
|
|
</Show>
|
||
|
|
<div class={styles.body}>
|
||
|
|
<Show when={props.author}>
|
||
|
|
<div class={styles.author}>{props.author}</div>
|
||
|
|
</Show>
|
||
|
|
<div class={styles.quote}>{props.body}</div>
|
||
|
|
</div>
|
||
|
|
<Show when={props.cancel && props.variant === 'reply'}>
|
||
|
|
<div class={clsx(styles.cancel, styles.icon)} onClick={props.cancel}>
|
||
|
|
<Icon name="close-gray" />
|
||
|
|
</div>
|
||
|
|
</Show>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default QuotedMessage
|