formatting
This commit is contained in:
Виталий Лавшонок
@@ -1,53 +1,47 @@
|
||||
import React, { FC } from "react";
|
||||
import { cn } from "../../../lib/cn";
|
||||
import LaTextContainer from "./LaTextContainer";
|
||||
import { CopyIcon } from "../../../assets/icons/missions";
|
||||
import React, { FC } from 'react';
|
||||
import { cn } from '../../../lib/cn';
|
||||
import LaTextContainer from './LaTextContainer';
|
||||
import { CopyIcon } from '../../../assets/icons/missions';
|
||||
// import FullLatexRenderer from "./FullLatexRenderer";
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
interface CopyableDivPropd{
|
||||
interface CopyableDivPropd {
|
||||
content: string;
|
||||
}
|
||||
|
||||
const CopyableDiv: FC<CopyableDivPropd> = ({ content }) => {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
alert("Скопировано!");
|
||||
} catch (err) {
|
||||
console.error("Ошибка копирования:", err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative p-[10px] bg-liquid-lighter rounded-[10px] whitespace-pre-line"
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
{content}
|
||||
|
||||
|
||||
<img
|
||||
src={CopyIcon}
|
||||
alt="copy"
|
||||
className={cn("absolute top-2 right-2 w-6 h-6 cursor-pointer opacity-0 transition-all duration-300 hover:h-7 hover:w-7 hover:top-[6px] hover:right-[6px]",
|
||||
hovered && " opacity-100"
|
||||
)}
|
||||
onClick={handleCopy}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
alert('Скопировано!');
|
||||
} catch (err) {
|
||||
console.error('Ошибка копирования:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative p-[10px] bg-liquid-lighter rounded-[10px] whitespace-pre-line"
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
{content}
|
||||
|
||||
<img
|
||||
src={CopyIcon}
|
||||
alt="copy"
|
||||
className={cn(
|
||||
'absolute top-2 right-2 w-6 h-6 cursor-pointer opacity-0 transition-all duration-300 hover:h-7 hover:w-7 hover:top-[6px] hover:right-[6px]',
|
||||
hovered && ' opacity-100',
|
||||
)}
|
||||
onClick={handleCopy}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export interface StatementData {
|
||||
id?: number;
|
||||
@@ -65,10 +59,10 @@ export interface StatementData {
|
||||
}
|
||||
|
||||
function extractDivByClass(html: string, className: string): string {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, "text/html");
|
||||
const div = doc.querySelector(`div.${className}`);
|
||||
return div ? div.outerHTML : "";
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const div = doc.querySelector(`div.${className}`);
|
||||
return div ? div.outerHTML : '';
|
||||
}
|
||||
|
||||
const Statement: React.FC<StatementData> = ({
|
||||
@@ -77,63 +71,110 @@ const Statement: React.FC<StatementData> = ({
|
||||
tags,
|
||||
timeLimit = 1000,
|
||||
memoryLimit = 256 * 1024 * 1024,
|
||||
legend = "",
|
||||
input = "",
|
||||
output = "",
|
||||
legend = '',
|
||||
input = '',
|
||||
output = '',
|
||||
sampleTests = [],
|
||||
notes = "",
|
||||
html = "",
|
||||
notes = '',
|
||||
html = '',
|
||||
mediaFiles,
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full h-full medium-scrollbar pl-[20px] pr-[12px] gap-[20px] text-liquid-white overflow-y-scroll thin-dark-scrollbar [scrollbar-gutter:stable]">
|
||||
<div>
|
||||
<p className="h-[50px] text-[40px] font-bold text-liquid-white">{name}</p>
|
||||
<p className="h-[23px] text-[18px] font-bold text-liquid-light">Задача #{id}</p>
|
||||
<p className="h-[50px] text-[40px] font-bold text-liquid-white">
|
||||
{name}
|
||||
</p>
|
||||
<p className="h-[23px] text-[18px] font-bold text-liquid-light">
|
||||
Задача #{id}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-[10px] w-full flex-wrap">
|
||||
{tags && tags.map((v, i) => <div key={i} className="px-[16px] py-[8px] rounded-full bg-liquid-lighter ">{v}</div>)}
|
||||
{tags &&
|
||||
tags.map((v, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="px-[16px] py-[8px] rounded-full bg-liquid-lighter "
|
||||
>
|
||||
{v}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">ограничение по времени на тест:</span> {timeLimit / 1000} секунда</p>
|
||||
<p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">ограничение по памяти на тест:</span> {memoryLimit / 1024 / 1024} мегабайт</p>
|
||||
<p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">ввод:</span> стандартный ввод</p>
|
||||
<p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">вывод:</span> стандартный вывод</p>
|
||||
<p className="text-liquid-white h-[20px] text-[18px] font-bold">
|
||||
<span className="text-liquid-light">
|
||||
ограничение по времени на тест:
|
||||
</span>{' '}
|
||||
{timeLimit / 1000} секунда
|
||||
</p>
|
||||
<p className="text-liquid-white h-[20px] text-[18px] font-bold">
|
||||
<span className="text-liquid-light">
|
||||
ограничение по памяти на тест:
|
||||
</span>{' '}
|
||||
{memoryLimit / 1024 / 1024} мегабайт
|
||||
</p>
|
||||
<p className="text-liquid-white h-[20px] text-[18px] font-bold">
|
||||
<span className="text-liquid-light">ввод:</span> стандартный
|
||||
ввод
|
||||
</p>
|
||||
<p className="text-liquid-white h-[20px] text-[18px] font-bold">
|
||||
<span className="text-liquid-light">вывод:</span>{' '}
|
||||
стандартный вывод
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-[10px] mt-[20px]">
|
||||
<LaTextContainer html={extractDivByClass(html, "legend")} latex={legend} mediaFiles={mediaFiles}/>
|
||||
<LaTextContainer
|
||||
html={extractDivByClass(html, 'legend')}
|
||||
latex={legend}
|
||||
mediaFiles={mediaFiles}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
<LaTextContainer html={extractDivByClass(html, "input-specification")} latex={input} mediaFiles={mediaFiles}/>
|
||||
<LaTextContainer
|
||||
html={extractDivByClass(html, 'input-specification')}
|
||||
latex={input}
|
||||
mediaFiles={mediaFiles}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
<LaTextContainer html={extractDivByClass(html, "output-specification")} latex={output} mediaFiles={mediaFiles}/>
|
||||
<LaTextContainer
|
||||
html={extractDivByClass(html, 'output-specification')}
|
||||
latex={output}
|
||||
mediaFiles={mediaFiles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
<div className="text-[18px] font-bold">{sampleTests.length == 1 ? "Пример" : "Примеры"}</div>
|
||||
|
||||
<div className="text-[18px] font-bold">
|
||||
{sampleTests.length == 1 ? 'Пример' : 'Примеры'}
|
||||
</div>
|
||||
|
||||
{sampleTests.map((v, i) =>
|
||||
{sampleTests.map((v, i) => (
|
||||
<div key={i} className="flex flex-col gap-[10px]">
|
||||
<div className="text-[14px] font-bold">Входные данные</div>
|
||||
<CopyableDiv content={v.input}/>
|
||||
<div className="text-[14px] font-bold">Выходные данные</div>
|
||||
<CopyableDiv content={v.output}/>
|
||||
<div className="text-[14px] font-bold">
|
||||
Входные данные
|
||||
</div>
|
||||
<CopyableDiv content={v.input} />
|
||||
<div className="text-[14px] font-bold">
|
||||
Выходные данные
|
||||
</div>
|
||||
<CopyableDiv content={v.output} />
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
<LaTextContainer html={extractDivByClass(html, "note")} latex={notes} mediaFiles={mediaFiles}/>
|
||||
<LaTextContainer
|
||||
html={extractDivByClass(html, 'note')}
|
||||
latex={notes}
|
||||
mediaFiles={mediaFiles}
|
||||
/>
|
||||
<div>Автор: Jacks</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default Statement;
|
||||
export default Statement;
|
||||
|
||||
Reference in New Issue
Block a user