60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
import React from 'react';
|
||
import './Reviews.css';
|
||
|
||
// Массив с отзывами пользователей
|
||
const reviews = [
|
||
{
|
||
id: 1,
|
||
text: "Очень довольна сервисом и качеством продукции! Кожа стала заметно лучше.",
|
||
author: "Анна Петрова",
|
||
rating: 5
|
||
},
|
||
{
|
||
id: 2,
|
||
text: "Быстрая доставка, приятные цены. Закажу ещё!",
|
||
author: "Ирина Сидорова",
|
||
rating: 4
|
||
},
|
||
{
|
||
id: 3,
|
||
text: "Пользуюсь кремом уже месяц – результат отличный!",
|
||
author: "Мария Иванова",
|
||
rating: 5
|
||
}
|
||
];
|
||
|
||
// Компонент для отображения звездного рейтинга
|
||
function StarRating({ rating }) {
|
||
return (
|
||
<span className="star-rating">
|
||
{'★'.repeat(rating)}
|
||
{'☆'.repeat(5 - rating)}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
// Основной компонент отзывов
|
||
function Reviews() {
|
||
return (
|
||
<section className="reviews-section">
|
||
<h2>Отзывы пользователей</h2>
|
||
|
||
<div className="reviews-list">{/* Перебираем массив отзывов */}
|
||
{reviews.map(review => (
|
||
// Карточка отзыва с уникальным ключом
|
||
<div key={review.id} className="review-card">
|
||
<p className="review-text">"{review.text}"</p>
|
||
<div className="review-info">
|
||
<span className="review-author">{review.author}</span>
|
||
<StarRating rating={review.rating} />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
|
||
export default Reviews;
|