bro-js/challenge-admin-pl
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich
2025-12-15 21:53:45 +03:00
parent 9bc5225c27
commit 43f73a129f
1 changed files with 94 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/pages/tasks/TaskFormPage.tsx
View File

@@ -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')}