Integrate (LearnProgress)

src/components/HighlightedText.tsx

@@ -10,6 +10,7 @@ interface HighlightedTextProps {
   search?: RegExp;
   children?: React.ReactNode;
   text: string;
+  onClick?: () => void;
   attrs?: { [key: string]: string };
 }
 

src/components/LearnProgress.tsx

@@ -0,0 +1,103 @@
+import clsx from 'clsx';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import Icon from './Icon';
+import { InteractiveAreaContext } from 'src/context/InteractiveAreaContext';
+import HighlightedText from './HighlightedText';
+
+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);
+
+  return (
+    <div
+      className={clsx(
+        'hidden lg:block text-xs top-[50%] -translate-y-[50%] absolute pl-5 z-10 transition-all select-none',
+        open ? 'left-0 ' : '-left-[204px]',
+      )}
+    >
+      <div
+        ref={learnProgressRef}
+        className="hidden-scrollbar scroll-smooth bg-[#282c34] shadow-2xl shadow-[#282c34] relative w-56 overflow-y-scroll overflow-x-hidden py-10  h-[320px]"
+      >
+        <div
+          onClick={toggleProgress}
+          className={clsx(
+            'w-10 h-10 cursor-pointer rounded-full  flex fixed top-[50%] -translate-x-[50%] -translate-y-[50%] transition-all duration-50',
+            open ? ' left-0 bg-neutral-600/40' : 'left-[204px] bg-emerald-600',
+          )}
+        >
+          <Icon
+            icon="arrow-left"
+            size={15}
+            className={clsx(
+              'ml-auto my-auto mr-1 text-neutral-100',
+              open ? 'rotate-0' : 'rotate-180',
+            )}
+          />
+        </div>
+        <div className="flex h-10 w-72 bg-gradient-to-b pointer-events-none from-[#282c34] z-20 to-neutral-50/0 fixed top-0" />
+        <div className="flex h-10 w-72 bg-gradient-to-t pointer-events-none from-[#282c34] z-20 to-neutral-50/0 fixed bottom-0" />
+        {lessonData.map((lesson, index) => (
+          <div
+            key={lesson.title + index}
+            className={clsx(
+              {
+                'active-step text-green-400': step === index,
+                '': lastStep >= index && step !== index,
+              },
+              'step-item relative truncate max-w-[80%] flex items-center',
+              index !== lessonData.length - 1 &&
+                "pb-10 after:content-[''] after:block after:w-[2px] after:h-6 after:bg-neutral-700 after:rounded-md after:left-[7px] after:top-6 after:absolute",
+            )}
+          >
+            {step === index && (
+              <Icon icon="play" size={16} className="text-green-400 mr-2 flex-shrink-0" />
+            )}
+            {lastStep >= index && step !== index && (
+              <Icon icon="check" size={16} className="text-green-400 mr-2 flex-shrink-0" />
+            )}
+            {lastStep < index && (
+              <Icon icon="lock-closed" size={16} className="text-neutral-500 mr-2 flex-shrink-0" />
+            )}
+
+            <HighlightedText
+              element="span"
+              className={clsx(
+                'truncate transition-all',
+                index === step
+                  ? '!pl-2 text-neutral-50'
+                  : 'text-neutral-300 hover:text-neutral-100 pl-0 cursor-pointer',
+              )}
+              text={formatMessage({ id: lesson.title })}
+              onClick={() => handleChangeStep(index)}
+              attrs={{
+                className: step === index ? 'text-emerald-400' : 'text-emerald-600',
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LearnProgress;

src/components/Step.tsx

@@ -7,7 +7,6 @@ import InteractiveArea from 'src/components/InteractiveArea';
 import HighlightedText from 'src/components/HighlightedText';
 import Progress from 'src/components/Progress';
 import Button, { ButtonVariants } from 'src/components/Button';
-import SupportButton from 'src/components/SupportButton';
 import { InteractiveAreaContext } from 'src/context/InteractiveAreaContext';
 
 const Step = () => {

src/context/InteractiveAreaContext.tsx

@@ -18,6 +18,7 @@ interface IInteractiveAreaContext {
   setLockError: (lockError: boolean) => void;
   prevStep: () => void;
   nextStep: () => void;
+  updateStorage: (step: number) => void;
   lesson: Lesson;
   lessonData: LessonData[];
   data: LessonData;
@@ -38,6 +39,7 @@ const InteractiveAreaContext = createContext<IInteractiveAreaContext>({
   setMatch: () => {},
   prevStep: () => {},
   nextStep: () => {},
+  updateStorage: () => {},
   lesson: null,
   lessonData: [],
   data: null,
@@ -122,6 +124,7 @@ const InteractiveAreaProvider = ({ lesson, lessonData, children }) => {
         setLockError,
         prevStep,
         nextStep,
+        updateStorage,
         lesson,
         lessonData,
         data,

src/pages/[lang]/learn/[lesson].tsx

@@ -4,6 +4,7 @@ import Header from 'src/components/Header';
 import CustomHead from 'src/components/CustomHead';
 import LearnFooter from 'src/components/LearnFooter';
 import Step from 'src/components/Step';
+import LearnProgress from 'src/components/LearnProgress';
 import { defaultLocale, locales } from 'src/localization';
 import { Lesson } from 'src/types';
 import lessons from 'src/data/lessons/index.json';
@@ -28,6 +29,7 @@ const PageLesson = ({ lesson }: PageLessonProps) => {
       <InteractiveAreaProvider key={lessonData} lesson={lesson} lessonData={lessonData}>
         <div className="px-3 flex flex-col flex-1 justify-between">
           <Header page="learn-detail" />
+          <LearnProgress />
           <Step />
           <LearnFooter />
         </div>

src/styles/globals.css

@@ -16,6 +16,10 @@
   }
 }
 
+.hidden-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 ::-webkit-scrollbar {
   @apply h-1 w-1;
 }