feat: added lesson04. made common Button component.

public/locales/en/lesson04.json

@@ -0,0 +1,3 @@
+{
+  "reset-button": "Reset results"
+}

public/locales/ru/lesson04.json

@@ -0,0 +1,3 @@
+{
+  "reset-button": "Сбросить результаты"
+}

src/components/Button.jsx

@@ -0,0 +1,13 @@
+import styles from "./Button.module.css";
+
+const Button = ({ onClick, children, type = 'button', className }) => (
+    <button
+        onClick={onClick}
+        type={type}
+        className={`${styles.button} ${className || ''}`}
+    >
+        {children}
+    </button>
+);
+
+export default Button;

src/components/Button.module.css

@@ -0,0 +1,16 @@
+.button {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 8px;
+    background: #f5f5f5;
+    color: #333;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.button:hover {
+    background: #e8e8e8;
+}

src/components/LessonsPage.js

@@ -3,11 +3,12 @@ import Draggable from 'react-draggable';
 import Lesson01 from "../lessons/lesson01/app/Lesson01";
 import Lesson02 from "../lessons/lesson02/app/Lesson02";
 import Lesson03 from "../lessons/lesson03/app/Lesson03";
+import Lesson04 from "../lessons/lesson04/app/Lesson04";
 import {useTranslation} from "react-i18next";
 import {LanguageSwitcher} from "./LanguageSwitcher";
 import './LessonsPage.css';
 
-const lessons = [Lesson01, Lesson02, Lesson03];
+const lessons = [Lesson01, Lesson02, Lesson03, Lesson04];
 
 export default function LessonsPage() {
     const { i18n } = useTranslation();

src/lessons/lesson04/app/Lesson04.jsx

@@ -0,0 +1,15 @@
+import styles from './Lesson04.module.css';
+import Lesson04Feedback from "../components/Lesson04Feedback";
+
+export const Lesson04 = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.wrapper}>
+                <Lesson04Feedback>Some content</Lesson04Feedback>
+                <Lesson04Feedback>Another content</Lesson04Feedback>
+            </div>
+        </div>
+    );
+};
+
+export default Lesson04;

src/lessons/lesson04/app/Lesson04.module.css

@@ -0,0 +1,16 @@
+.container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f3f4f6;
+}
+
+.wrapper {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 800px;
+}

src/lessons/lesson04/components/Lesson04Feedback.jsx

@@ -0,0 +1,67 @@
+import {useState} from 'react';
+import styles from './Lesson04Feedback.module.css';
+import Button from "../../../components/Button";
+import {useTranslation} from "react-i18next";
+
+const Lesson04Feedback = ({ children }) => {
+    const [likes, setLikes] = useState(0);
+    const [dislikes, setDislikes] = useState(0);
+    const { t, ready } = useTranslation('lesson04', { useSuspense: false });
+    if (!ready) {
+        return <div>Loading...</div>;
+    }
+
+    const handleLike = () => {
+        setLikes(prev => prev + 1);
+    };
+
+    const handleDislike = () => {
+        setDislikes(prev => prev + 1);
+    };
+
+    const handleReset = () => {
+        setLikes(0);
+        setDislikes(0);
+    };
+
+    return (
+        <div className={styles.feedback}>
+            <div className={styles.content}>
+                {children}
+            </div>
+
+            <div className={styles.actions}>
+                <div className={styles.voteGroup}>
+                    <Button
+                        onClick={handleLike}
+                        className={styles.voteButton}
+                    >
+                        <span className={styles.count}>{likes}</span>
+                        <svg className={styles.icon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+                        </svg>
+                    </Button>
+
+                    <Button
+                        onClick={handleDislike}
+                        className={styles.voteButton}
+                    >
+                        <svg className={styles.icon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3" />
+                        </svg>
+                        <span className={styles.count}>{dislikes}</span>
+                    </Button>
+                </div>
+
+                <Button
+                    onClick={handleReset}
+                    className={styles.resetButton}
+                >
+                    {t('reset-button')}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default Lesson04Feedback;

src/lessons/lesson04/components/Lesson04Feedback.module.css

@@ -0,0 +1,67 @@
+.feedback {
+    padding: 24px;
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+.content {
+    margin-bottom: 20px;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #eee;
+}
+
+@media (max-width: 600px) {
+    .actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+
+.voteGroup {
+    display: flex;
+    gap: 12px;
+}
+
+
+.voteButton {
+    min-width: 100px;
+    justify-content: center;
+    gap: 8px;
+}
+
+.resetButton {
+    background: #f3f4f6;
+    color: #4b5563;
+}
+
+.resetButton:hover {
+    background: #e5e7eb;
+}
+
+.icon {
+    width: 20px;
+    height: 20px;
+}
+
+.count {
+    font-weight: 600;
+    min-width: 20px;
+    text-align: center;
+}
+
+.count {
+    transition: transform 0.2s ease;
+}
+
+.button:active .count {
+    transform: scale(1.2);
+}