Function LearnProgress

src/components/LearnProgress.tsx:9–125

()

import { useLanguageDirection } from "src/utils/useLanguageDirection";

const LearnProgress = () => {
  const [open, setOpen] = useState(false);
  const learnProgressRef = useRef<HTMLDivElement>(null);
  const { formatMessage } = useIntl();
  const { lessonData, step, setStep, lastStep, updateStorage } = useContext(InteractiveAreaContext);

  useEffect(() => {
    const activeitem = [...document.querySelectorAll('.step-item')][step];
    if (!activeitem) return;
    const topPos = (activeitem as HTMLDivElement).offsetTop;
    learnProgressRef.current.scrollTop = topPos - 153;
  }, [step]);

  const handleChangeStep = (step: number) => {
    if (step > lastStep) return;

    updateStorage(step);
    setStep(step);
  };

  const toggleProgress = () => setOpen(!open);

  const direction = useLanguageDirection();

  // list lesson (ToggleProgress For RTL/LTR)
  const listOpen = direction === 'rtl' ? 'left-0' : 'right-0';
  const listClose = direction === 'rtl' ? '-left-[244px]' : '-right-[244px]';
  const listOpenInner = direction === 'rtl' ? '-left-10' : '-right-10';
  const listCloseInner = direction === 'rtl' ? 'left-[204px]' : 'right-[204px]';
  const listIconName = direction === 'rtl' ? 'arrow-right' : 'arrow-left';

  return (
    <div
      className={clsx(
        'hidden lg:block text-xs top-[50%] -translate-y-[50%] absolute z-10 transition-all select-none',
        open ? listOpen : listClose,
      )}
    >
      <div
        ref={learnProgressRef}
        className="hidden-scrollbar scroll-smooth pl-5 bg-[#282c34] rounded-2xl shadow-2xl shadow-[#282c34] relative w-56 overflow-y-scroll overflow-x-hidden py-10  h-[320px]"
      >
        <div
          onClick={toggleProgress}
          className={clsx(
            direction === 'rtl' ? 'translate-x-[50%]' : '-translate-x-[50%]',
            `w-10 h-10 cursor-pointer rounded-full  flex fixed top-[50%] transition-all duration-50`,
            open ? `${listOpenInner} bg-neutral-600/40` : `${listCloseInner} bg-emerald-600`,
          )}
        >
          <Icon
            icon={listIconName}
            size={15}
            className={clsx(
              direction === 'rtl' ? 'ml-auto mr-1' : 'mr-auto ml-1',
              `my-auto text-neutral-100`,
              open ? 'rotate-180' : 'rotate-0',
            )}