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

Front/src/shared/components/TaskTabs/TaskTabs.tsx
53 строки2 KB
Rics
add app
16 сен 2025, 16:56
16 сен 2025, 16:5675981cd
import { useState } from "react";
import styles from "./styles.module.scss";
import { TaskDescription, TaskSolution } from "@shared/components";
import { Task } from "@/models";
import {useParams} from "react-router-dom";
import description from '@shared/assets/icons/description.svg';
import solution from '@shared/assets/icons/solution.svg';

type TaskTabsProps = {
    task: Task;
};

export const TaskTabs = ({ task }: TaskTabsProps) => {
    const { id } = useParams();
    const taskNumber = Number(id);

    const [tab, setTab] = useState<"description" | "solution">("description");

    return (
        <div className={styles.tabs}>
            <div className={styles.switcherWrapper}>
                <div className={styles.switcher}>
                    <div className={styles.track} style={{ transform: tab === 'description' ? 'translateX(0%)' : 'translateX(100%)' }} />

                    <button
                        onClick={() => setTab("description")}
                        className={styles.button}
                    >
                        <img src={description} alt="desc" className={styles.img}/>
                        Описание
                    </button>

                    <button
                        onClick={() => setTab("solution")}
                        className={styles.button}
                    >
                        <img src={solution} alt="sol" className={styles.img}/>
                        Решение
                    </button>
                </div>
                <div className={styles.underline} />
            </div>

            <div className={styles.content}>
                {tab === "description" ? (
                    <TaskDescription task={task} number={taskNumber} />
                ) : (
                    <TaskSolution task={task} number={taskNumber} />
                )}
            </div>
        </div>
    );
};