Added poetry display on userPage

front/src/components/Poetry.tsx

@@ -0,0 +1,39 @@
+import { CSSProperties } from 'react'
+import { usePoetry } from '../hooks/api'
+import { gotError, gotResponse } from '../hooks/useFetch'
+
+const styles = {
+    container: {
+        paddingBottom: 8,
+    } as CSSProperties,
+}
+
+function Poetry() {
+    const poetry = usePoetry()
+
+    return (
+        <div style={styles.container}>
+            <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 dangerouslySetInnerHTML={{ __html: poetry.data.text }} />
+                            <p><em>{poetry.data.author}</em></p>
+                        </>
+                    )
+                ) : (
+                    <h5>Загрузка...</h5>
+                )
+            }
+
+        </div>
+    )
+}
+
+export default Poetry

front/src/components/index.ts

@@ -12,3 +12,4 @@ export { default as CategoryPreview } from './CategoryPreview'
 export { default as StoriesPreview } from './StoriesPreview'
 export { default as Points } from './Points'
 export { default as SignOut } from './SignOut'
+export { default as Poetry } from './Poetry'