42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { usePoetry } from '../hooks/api'
|
||
import { gotError, gotResponse } from '../hooks/useFetch'
|
||
|
||
import styles from '../styles/Poetry.module.css'
|
||
|
||
function Poetry() {
|
||
const poetry = usePoetry()
|
||
|
||
return (
|
||
<section>
|
||
<h4 className='fw-bold'>Поэзия</h4> {
|
||
gotResponse(poetry) ? (
|
||
gotError(poetry) ? (
|
||
<div className='text-danger'>
|
||
<h5>Ошибка получения стиха</h5>
|
||
<p>{poetry.error}</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<h5>{poetry.data.title}</h5>
|
||
<p
|
||
className={styles.text}
|
||
dangerouslySetInnerHTML={{
|
||
__html:
|
||
poetry.data.text.trim().replace(/(\n){3,}/g, '\n\n'),
|
||
}}
|
||
/>
|
||
<p><em>{poetry.data.author}</em></p>
|
||
<img src={`/poem_pic/${poetry.data.id}.jpg`} alt='Иллюстрация' />
|
||
</>
|
||
)
|
||
) : (
|
||
<h5>Загрузка...</h5>
|
||
)
|
||
}
|
||
|
||
</section>
|
||
)
|
||
}
|
||
|
||
export default Poetry
|