File size: 2,411 Bytes
1982de5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
import {Post as PostType, Topic as TopicType} from "../../utils/topics";
import style from "./style.module.scss";
import {Preview} from "../preview";
import {iso8601ToFrench} from "../../utils/dates";
import {FormGroup} from "../form";
import {Slider} from "../slider";
import {Button} from "../button";
import {Settings as SettingsType, Settings} from "../../utils/settings";
export function Topic(props: {
topic: TopicType,
settings: Settings,
setSettings: (settings: SettingsType) => void,
addPosts: (topicId: string, postsCount: number) => Promise<void>,
pendingGeneration: boolean,
}) {
console.log(props.topic)
return (
<div>
{props.topic.posts.map(post => <Post post={post}/>)}
<div>
<h2>Ajout de posts</h2>
<div className={style.generationSettings}>
<FormGroup>
<label htmlFor="postCount">Nombre de posts</label>
<Slider
name="postCount"
value={props.settings.postCount}
// onChange={(v) => props.setSettings({...props.settings, temperature: v as number})}
// onChange={setGenerationPostCount}
onChange={(v) => props.setSettings({...props.settings, postCount: v})}
min={1}
max={10}
step={1}
/>
</FormGroup>
</div>
<Button
onClick={() => props.addPosts(props.topic.id, props.settings.postCount)}
secondary={true}
loading={props.pendingGeneration}
>
Générer
</Button>
</div>
<hr/>
</div>
)
}
function Post(props: {
post: PostType
}) {
return (
<div className={style.post}>
<div className={style.postHeader}>
<img src="https://image.jeuxvideo.com/avatar-sm/default.jpg" className={style.avatar} alt="ahi"/>
<div className={style.user}>{props.post.user}</div>
<div className={style.date}>{iso8601ToFrench(props.post.date)}</div>
</div>
<Preview raw={props.post.content}/>
</div>
)
} |