creating my polls page

SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx

@@ -0,0 +1,60 @@
+import styles from './MySurveysList.module.css'
+import {useNavigate} from "react-router-dom";
+
+interface MySurveyItem{
+    id: string,
+    title: string,
+    description: string,
+    date: string
+    status: 'active' | 'completed'
+}
+
+export const MySurveyList = () => {
+    const navigate = useNavigate();
+
+    const surveys: MySurveyItem[] = [
+        {
+            id: '1',
+            title: 'Опрос 1',
+            description: 'Описание опроса 1',
+            date: '27-04-2025',
+            status: 'active',
+        },
+        {
+            id: '2',
+            title: 'Опрос 2',
+            description: 'Описание опроса 2',
+            date: '01-01-2025',
+            status: 'completed',
+        }
+    ]
+
+    const handleSurveyClick = (id: string) => {
+        navigate(`/survey/${id}/questions`)
+    }
+
+    return(
+        <div className={styles.main}>
+            {surveys.map((survey) => (
+                <div
+                    key={survey.id}
+                    className={styles.survey}
+                    onClick={() => handleSurveyClick(survey.id)}
+                    role="button"
+                    tabIndex={0}
+                >
+                    <div>
+                        <h1 className={styles.title}>{survey.title}</h1>
+                        <h2 className={styles.description}>{survey.description}</h2>
+                        <span className={styles.date}>Дата создания: {survey.date}</span>
+                    </div>
+                    <div className={`${styles.status} ${
+                        survey.status === 'active' ? styles.active : styles.completed
+                    }`}>
+                        {survey.status === 'active' ? 'Активен' : 'Завершён'}
+                    </div>
+                </div>
+            ))}
+        </div>
+    )
+}