Front/src/shared/components/LessonBlocks/LessonBlocks.tsx - master - Rics/JobReady

Front/src/shared/components/LessonBlocks/LessonBlocks.tsx
89 строк3 KB
Rics
add app
16 сен 2025, 16:56
16 сен 2025, 16:5675981cd
import s from "./lessonBlocks.module.scss";
import React from "react";
import codeSVG from "@shared/assets/icons/code.svg";
import eye from '@shared/assets/icons/eye.svg';

type StepProps = { title: string; code: string };

const CodeBox: React.FC<{ code: string; className?: string }> = ({ code, className }) => {
    const lines = React.useMemo(() => code.replace(/\n+$/,"").split("\n"), [code]);
    return (
        <div className={`${s.codeBox} ${className || ""}`}>
            <div className={s.gutter}>
                {lines.map((_, i) => (
                    <div key={i} className={s.ln}>{i + 1}</div>
                ))}
            </div>
            <pre className={s.pre} aria-label="code">
        {lines.map((l, i) => (
            <div key={i} className={s.line}>{l || " "}</div>
        ))}
      </pre>
        </div>
    );
};

const Step: React.FC<StepProps> = ({ title, code }) => (
    <section className={s.step}>
        <div className={s.title}>{title}</div>
        <CodeBox code={code} />
    </section>
);

const SolutionBlock: React.FC<{ code: string }> = ({ code }) => {
    const [open, setOpen] = React.useState(false);
    return (
        <section className={s.solution}>
            <div className={s.lang}>Язык: <b>Python</b></div>

            <div className={s.solBox}>
                <div className={s.solHead}>
                    <span className={s.codeIcon} aria-hidden>
                        <img src={codeSVG} alt="code" />
                    </span>
                    <span>Код</span>
                </div>

                <div className={s.solBody}>
                    <div className={`${s.blurWrap} ${!open ? s.blurred : ""}`}>
                        <CodeBox code={code} className={s.solCodeBox}/>
                    </div>

                    {!open && (
                        <button className={s.revealBtn} onClick={() => setOpen(true)}>
                            <div className={s.container}>
                                <span>
                                    <img src={eye} />
                                </span>
                                <span className={s.text}>Показать решение</span>
                            </div>
                        </button>
                    )}
                </div>
            </div>
        </section>
    );
};

export const LessonBlocks = () => {
    return (
        <main className={s.wrap}>
            <Step
                title="1. Читаем три целых числа из входа"
                code={`a, b, c = map(int, input().split())`}
            />

            <Step
                title="2. Создаем список из трех чисел и сортируем его"
                code={`nums = [a, b, c]\nnums.sort()`}
            />

            <Step
                title="3. Выводим элемент посередине"
                code={`print(nums[1])`}
            />

            <SolutionBlock code={`print(nums[1])`} />
        </main>
    );
}