|
|
|
@ -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>
|
|
|
|
|
);
|
|
|
|
|