60 lines
No EOL
1.8 KiB
TypeScript
60 lines
No EOL
1.8 KiB
TypeScript
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>
|
||
)
|
||
} |