Популярные косметические средства
-
- {products.map(product => (
-
+ {/* Основная секция */}
+
Популярные косметические средства
+ + {/* Контейнер сетки */}
+ {products.map(product => ( /* Перебираем массив товаров */
+
-
-
{product.name}
-{product.description}
-
- {product.price}
-
+
))}
diff --git a/src/components/PopularProducts/img/product5.png b/src/components/PopularProducts/img/product5.png
new file mode 100644
index 0000000..d184433
Binary files /dev/null and b/src/components/PopularProducts/img/product5.png differ
diff --git a/src/components/PopularProducts/img/product6.png b/src/components/PopularProducts/img/product6.png
new file mode 100644
index 0000000..f6d8b78
Binary files /dev/null and b/src/components/PopularProducts/img/product6.png differ
diff --git a/src/components/Reviews/Reviews.css b/src/components/Reviews/Reviews.css
index d76d031..7704d74 100644
--- a/src/components/Reviews/Reviews.css
+++ b/src/components/Reviews/Reviews.css
@@ -1,48 +1,47 @@
.reviews-section {
- max-width: 800px;
- margin: 40px auto;
- padding: 0 20px;
- }
-
- .reviews-section h2 {
- text-align: center;
- margin-bottom: 32px;
- font-size: 26px;
- }
-
- .reviews-list {
- display: flex;
- flex-direction: column;
- gap: 24px;
- }
-
- .review-card {
- border: 1px solid #eee;
- border-radius: 10px;
- background: #fafbfc;
- padding: 20px 24px;
- box-shadow: 0 2px 8px rgba(0,0,0,0.03);
- }
-
- .review-text {
- font-size: 16px;
- margin-bottom: 12px;
- color: #222;
- }
-
- .review-meta {
- display: flex;
- align-items: center;
- gap: 16px;
- }
-
- .review-author {
- font-weight: bold;
- color: #6C63FF;
- }
-
- .star-rating {
- color: #FFD700;
- font-size: 18px;
- }
-
\ No newline at end of file
+ max-width: 800px;
+ margin: 40px auto;
+ padding: 0 20px;
+}
+
+.reviews-section h2 {
+ text-align: center;
+ margin-bottom: 32px;
+ font-size: 26px;
+}
+
+.reviews-list {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.review-card {
+ border: 1px solid #eee;
+ border-radius: 10px;
+ background: #fafbfc;
+ padding: 20px 24px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+}
+
+.review-text {
+ font-size: 16px;
+ margin-bottom: 12px;
+ color: #222;
+}
+
+.review-info {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.review-author {
+ font-weight: bold;
+ color: #6C63FF;
+}
+
+.star-rating {
+ color: #FFD700;
+ font-size: 18px;
+}
diff --git a/src/components/Reviews/Reviews.js b/src/components/Reviews/Reviews.js
index 55095ac..97125fa 100644
--- a/src/components/Reviews/Reviews.js
+++ b/src/components/Reviews/Reviews.js
@@ -1,6 +1,7 @@
import React from 'react';
import './Reviews.css';
+// Массив с отзывами пользователей
const reviews = [
{
id: 1,
@@ -22,6 +23,7 @@ const reviews = [
}
];
+// Компонент для отображения звездного рейтинга
function StarRating({ rating }) {
return (
@@ -31,17 +33,20 @@ function StarRating({ rating }) {
);
}
+// Основной компонент отзывов
function Reviews() {
return (
{product.name}
+{product.description}
+
+ {product.price}
+
Отзывы пользователей
-
+
Отзывы пользователей
+ +{/* Перебираем массив отзывов */}
{reviews.map(review => (
+ // Карточка отзыва с уникальным ключом
- {
- const { name, value } = e.target;
+ const { name, value } = e.target;
setFormData(prev => ({
- ...prev,
- [name]: value
+ ...prev, // Сохранение предыдущих значений
+ [name]: value // Динамическое обновление поля
}));
};
+ // Обработчик отправки формы
const handleSubmit = (e) => {
- e.preventDefault();
- console.log('Вход:', formData);
- navigate('/');
+ e.preventDefault(); // Отмена стандартного поведения
+ console.log('Вход:', formData); // Логирование данных (в реальном приложении - запрос к API)
+ navigate('/'); // Перенаправление на главную страницу
};
return (
+ // Основной контейнер страницы
"{review.text}"
-
- {review.author}
-
))}
@@ -50,4 +55,5 @@ function Reviews() {
);
}
+
export default Reviews;
diff --git a/src/components/SkinTypeQuiz/Question.js b/src/components/SkinTypeQuiz/Question.js
index d45ee23..caa32ba 100644
--- a/src/components/SkinTypeQuiz/Question.js
+++ b/src/components/SkinTypeQuiz/Question.js
@@ -1,15 +1,17 @@
import React, { useState, useEffect } from 'react';
function Question({ question, answer, onAnswer, isLast, onNext }) {
+ // Выбранные ответы
const [selected, setSelected] = useState(() => {
return question.type === 'multiple'
? Array.isArray(answer) ? [...answer] : []
: answer || '';
});
+ // Текст для поля "Другое"
const [otherText, setOtherText] = useState('');
- // Инициализация otherText
+ // Инициализация текста для "Другое"
useEffect(() => {
if (question.type === 'multiple' && Array.isArray(answer)) {
const otherItem = answer.find(item => item?.other);
@@ -17,7 +19,7 @@ function Question({ question, answer, onAnswer, isLast, onNext }) {
}
}, [answer, question.type]);
- // Синхронизация с пропсом answer
+ // Синхронизация с внешними изменениями
useEffect(() => {
if (question.type === 'multiple') {
setSelected(Array.isArray(answer) ? answer : []);
@@ -26,6 +28,7 @@ function Question({ question, answer, onAnswer, isLast, onNext }) {
}
}, [answer, question.type]);
+ // Обработчик изменения выбора
const handleChange = (option, isOther = false) => {
if (question.type === 'single') {
setSelected(option);
@@ -35,6 +38,7 @@ function Question({ question, answer, onAnswer, isLast, onNext }) {
let newSelected = Array.isArray(selected) ? [...selected] : [];
+ // Логика для чекбокса "Другое"
if (isOther) {
const existingOther = newSelected.findIndex(item => item?.other);
if (existingOther >= 0) {
@@ -56,6 +60,7 @@ function Question({ question, answer, onAnswer, isLast, onNext }) {
onAnswer(question.id, newSelected);
};
+ // Обработчик изменения текста для "Другое"
const handleOtherTextChange = (e) => {
const text = e.target.value;
setOtherText(text);
@@ -66,11 +71,13 @@ function Question({ question, answer, onAnswer, isLast, onNext }) {
onAnswer(question.id, newSelected);
};
+ // Отправка формы
const handleSubmit = (e) => {
e.preventDefault();
onNext();
};
+ // Нормализация выбранных значений
const safeSelected = question.type === 'multiple'
? (Array.isArray(selected) ? selected : [])
: selected;
diff --git a/src/components/SkinTypeQuiz/SkinTypeQuiz.js b/src/components/SkinTypeQuiz/SkinTypeQuiz.js
index bf662b8..db9cd72 100644
--- a/src/components/SkinTypeQuiz/SkinTypeQuiz.js
+++ b/src/components/SkinTypeQuiz/SkinTypeQuiz.js
@@ -3,6 +3,7 @@ import Question from './Question';
import Result from './Result';
import './SkinTypeQuiz.css';
+// Список всех вопросов опросника
const questionsMock = [
{
id: 1,
@@ -49,15 +50,25 @@ const questionsMock = [
];
function SkinTypeQuiz() {
+ // Текущий индекс вопроса
const [currentIndex, setCurrentIndex] = useState(0);
+
+ // Все ответы пользователя
const [answers, setAnswers] = useState({});
+
+ // Флаг показа результатов
const [showResult, setShowResult] = useState(false);
+
+ // Рекомендации по уходу
const [recommendations, setRecommendations] = useState('');
const questions = questionsMock;
+ // Обработчик выбора ответа
const handleAnswer = (questionId, answer) => {
const currentQuestion = questions.find(q => q.id === questionId);
+
+ // Для чекбоксов: преобразуем в массив если необходимо
const safeAnswer = currentQuestion.type === 'multiple'
? Array.isArray(answer) ? answer : []
: answer;
@@ -65,6 +76,7 @@ function SkinTypeQuiz() {
setAnswers(prev => ({ ...prev, [questionId]: safeAnswer }));
};
+ // Переход к следующему вопросу или показ результатов
const handleNext = () => {
if (currentIndex + 1 < questions.length) {
setCurrentIndex(currentIndex + 1);
@@ -75,10 +87,12 @@ function SkinTypeQuiz() {
}
};
+ // Показываем результаты если опрос завершен
if (showResult) {
return "{review.text}"
+
+ {review.author}
+
-
Вход
+Вход
+ + {/* Форма с обработчиком отправки */} + {/* Ссылка для перехода к регистрации */}
Нет аккаунта? Создать
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 9650cfb..944f3a1 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -1,46 +1,57 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import './AuthForms.css';
+import React, { useState } from 'react'; //для управления состоянием формы
+import { useNavigate } from 'react-router-dom';
+import './AuthForms.css';
function Register() {
+ // Состояние для хранения данных формы
const [formData, setFormData] = useState({
name: '',
email: '',
password: ''
});
+ // Хук для навигации между страницами
const navigate = useNavigate();
+ // Обработчик изменений в полях ввода
const handleChange = (e) => {
- const { name, value } = e.target;
+ const { name, value } = e.target; // Извлекаем имя поля и значение
setFormData(prev => ({
- ...prev,
- [name]: value
+ ...prev, // Копируем предыдущее состояние
+ [name]: value // Обновляем конкретное поле
}));
};
+ // Обработчик отправки формы
const handleSubmit = (e) => {
- e.preventDefault();
- console.log('Регистрация:', formData);
+ e.preventDefault(); // Отменяем стандартное поведение формы
+
+ // В реальном приложении здесь будет запрос к API
+ console.log('Регистрация:', formData);
+
+ // Перенаправляем на главную страницу
navigate('/');
};
return (
-
-
-