From 43f73a129f7297ed04f5ad56c154e5dd9fd65499 Mon Sep 17 00:00:00 2001
From: Primakov Alexandr <primakovpro@gmail.com>
Date: Mon, 15 Dec 2025 21:53:45 +0300
Subject: [PATCH] Refactor TaskFormPage to split learning material into blocks
 of 30 lines for improved readability. Each block is displayed with a label
 indicating its order. This enhances the user experience by organizing content
 more effectively.

---
 src/pages/tasks/TaskFormPage.tsx | 124 +++++++++++++++++++++++--------
 1 file changed, 94 insertions(+), 30 deletions(-)

diff --git a/src/pages/tasks/TaskFormPage.tsx b/src/pages/tasks/TaskFormPage.tsx
index bf5fba2..43684ae 100644
--- a/src/pages/tasks/TaskFormPage.tsx
+++ b/src/pages/tasks/TaskFormPage.tsx
@@ -26,6 +26,20 @@ import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { ErrorAlert } from '../../components/ErrorAlert'
 import { toaster } from '../../components/ui/toaster'
 
+// Функция для разбиения текста на блоки по 30 строк
+const splitTextIntoBlocks = (text: string, linesPerBlock: number = 30): string[] => {
+  if (!text) return []
+  const lines = text.split('\n')
+  const blocks: string[] = []
+  
+  for (let i = 0; i < lines.length; i += linesPerBlock) {
+    const block = lines.slice(i, i + linesPerBlock).join('\n')
+    blocks.push(block)
+  }
+  
+  return blocks
+}
+
 export const TaskFormPage: React.FC = () => {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
@@ -394,21 +408,46 @@ export const TaskFormPage: React.FC = () => {
                     overflowY="auto"
                   >
                     {learningMaterial ? (
-                      <Box
-                        className="markdown-preview"
-                        css={{
-                          '& a': {
-                            color: '#0f766e',
-                            textDecoration: 'underline',
-                            cursor: 'pointer',
-                            '&:hover': {
-                              color: '#115e59',
-                            }
-                          }
-                        }}
-                      >
-                        <ReactMarkdown>{learningMaterial}</ReactMarkdown>
-                      </Box>
+                      <VStack align="stretch" gap={4}>
+                        {splitTextIntoBlocks(learningMaterial, 30).map((block, index) => (
+                          <Box
+                            key={index}
+                            p={4}
+                            borderWidth="2px"
+                            borderColor="teal.200"
+                            borderRadius="md"
+                            bg="white"
+                            position="relative"
+                            className="markdown-preview"
+                            css={{
+                              '& a': {
+                                color: '#0f766e',
+                                textDecoration: 'underline',
+                                cursor: 'pointer',
+                                '&:hover': {
+                                  color: '#115e59',
+                                }
+                              }
+                            }}
+                          >
+                            <Box
+                              position="absolute"
+                              top="-10px"
+                              left="10px"
+                              bg="teal.500"
+                              color="white"
+                              px={2}
+                              py={1}
+                              borderRadius="md"
+                              fontSize="xs"
+                              fontWeight="bold"
+                            >
+                              Блок {index + 1} (30 строк)
+                            </Box>
+                            <ReactMarkdown>{block}</ReactMarkdown>
+                          </Box>
+                        ))}
+                      </VStack>
                     ) : (
                       <Text color="gray.400" fontStyle="italic">
                         {t('challenge.admin.tasks.preview.empty')}
@@ -455,21 +494,46 @@ export const TaskFormPage: React.FC = () => {
                   height="100%"
                 >
                   {learningMaterial ? (
-                    <Box
-                      className="markdown-preview"
-                      css={{
-                        '& a': {
-                          color: '#0f766e',
-                          textDecoration: 'underline',
-                          cursor: 'pointer',
-                          '&:hover': {
-                            color: '#115e59',
-                          }
-                        }
-                      }}
-                    >
-                      <ReactMarkdown>{learningMaterial}</ReactMarkdown>
-                    </Box>
+                    <VStack align="stretch" gap={4}>
+                      {splitTextIntoBlocks(learningMaterial, 30).map((block, index) => (
+                        <Box
+                          key={index}
+                          p={4}
+                          borderWidth="2px"
+                          borderColor="teal.200"
+                          borderRadius="md"
+                          bg="white"
+                          position="relative"
+                          className="markdown-preview"
+                          css={{
+                            '& a': {
+                              color: '#0f766e',
+                              textDecoration: 'underline',
+                              cursor: 'pointer',
+                              '&:hover': {
+                                color: '#115e59',
+                              }
+                            }
+                          }}
+                        >
+                          <Box
+                            position="absolute"
+                            top="-10px"
+                            left="10px"
+                            bg="teal.500"
+                            color="white"
+                            px={2}
+                            py={1}
+                            borderRadius="md"
+                            fontSize="xs"
+                            fontWeight="bold"
+                          >
+                            Блок {index + 1} (30 строк)
+                          </Box>
+                          <ReactMarkdown>{block}</ReactMarkdown>
+                        </Box>
+                      ))}
+                    </VStack>
                   ) : (
                     <Text color="gray.400" fontStyle="italic">
                       {t('challenge.admin.tasks.preview.empty')}