53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { Component, For } from 'solid-js'
|
||
import { AdminShoutInfo, Maybe, Topic } from '~/graphql/generated/graphql'
|
||
import styles from '../styles/Modal.module.css'
|
||
import CodePreview from '../ui/CodePreview'
|
||
import Modal from '../ui/Modal'
|
||
|
||
export interface ShoutBodyModalProps {
|
||
shout: AdminShoutInfo
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
}
|
||
|
||
const ShoutBodyModal: Component<ShoutBodyModalProps> = (props) => {
|
||
return (
|
||
<Modal
|
||
title={`Просмотр публикации: ${props.shout.title}`}
|
||
isOpen={props.isOpen}
|
||
onClose={props.onClose}
|
||
size="large"
|
||
>
|
||
<div class={styles['shout-body']}>
|
||
<div class={styles['shout-info']}>
|
||
<div class={styles['info-row']}>
|
||
<span class={styles['info-label']}>Автор:</span>
|
||
<span class={styles['info-value']}>{props.shout?.authors?.[0]?.email}</span>
|
||
</div>
|
||
<div class={styles['info-row']}>
|
||
<span class={styles['info-label']}>Просмотры:</span>
|
||
<span class={styles['info-value']}>{props.shout.stat?.views_count || 0}</span>
|
||
</div>
|
||
<div class={styles['info-row']}>
|
||
<span class={styles['info-label']}>Темы:</span>
|
||
<div class={styles['topics-list']}>
|
||
<For each={props.shout?.topics}>
|
||
{(topic: Maybe<Topic>) => <span class={styles['topic-badge']}>{topic?.title || ''}</span>}
|
||
</For>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class={styles['shout-content']}>
|
||
<h3>Содержание</h3>
|
||
<div class={styles['content-preview']}>
|
||
<CodePreview content={props.shout.body || ''} maxHeight="85vh" language="html" autoFormat />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|
||
|
||
export default ShoutBodyModal
|