double
pfqgauxfb 2 months ago
parent dc94d43538
commit 620ca67caa

@ -1,7 +1,9 @@
import React, { useState } from 'react';
import { useDoc } from '@docusaurus/theme-common/internal';
import styles from './styles.module.css';
const Comments = () => {
const doc = useDoc();
const [rating, setRating] = useState(0);
const [comment, setComment] = useState('');
const [comments, setComments] = useState([]);
@ -15,6 +17,7 @@ const Comments = () => {
rating,
text: comment,
date: new Date().toLocaleString(),
docId: doc.id,
},
]);
setComment('');
@ -56,24 +59,26 @@ const Comments = () => {
</form>
<div className={styles.commentsList}>
{comments.map((item, index) => (
<div key={index} className={styles.commentItem}>
<div className={styles.commentHeader}>
<div className={styles.stars}>
{[1, 2, 3, 4, 5].map((star) => (
<span
key={star}
className={`${styles.star} ${star <= item.rating ? styles.active : ''}`}
>
</span>
))}
{comments
.filter((item) => item.docId === doc.id)
.map((item, index) => (
<div key={index} className={styles.commentItem}>
<div className={styles.commentHeader}>
<div className={styles.stars}>
{[1, 2, 3, 4, 5].map((star) => (
<span
key={star}
className={`${styles.star} ${star <= item.rating ? styles.active : ''}`}
>
</span>
))}
</div>
<span className={styles.commentDate}>{item.date}</span>
</div>
<span className={styles.commentDate}>{item.date}</span>
<p className={styles.commentText}>{item.text}</p>
</div>
<p className={styles.commentText}>{item.text}</p>
</div>
))}
))}
</div>
</div>
);

Loading…
Cancel
Save