feat: fe mobile responsive next (#1609)

web/app/components/datasets/create/steps-nav-bar/index.module.css

@@ -14,14 +14,15 @@
   background-size: 16px;
 }
 .stepList {
-  @apply p-4;
+  @apply p-4 relative;
   line-height: 18px;
 }
 
 .stepItem {
-  @apply relative flex justify-items-start pt-3 pr-0 pb-3;
+  @apply relative flex justify-items-start pt-3 pr-0 pb-3 box-content;
   padding-left: 52px;
   font-size: 13px;
+  height: 18px;
 }
 
 .stepItem.step1::before {

web/app/components/datasets/create/steps-nav-bar/index.tsx

@@ -3,46 +3,56 @@ import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 
 import cn from 'classnames'
+import { useCallback } from 'react'
 import s from './index.module.css'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 type IStepsNavBarProps = {
-  step: number,
-  datasetId?: string,
+  step: number
+  datasetId?: string
 }
 
+const STEP_T_MAP: Record<number, string> = {
+  1: 'datasetCreation.steps.one',
+  2: 'datasetCreation.steps.two',
+  3: 'datasetCreation.steps.three',
+}
+
+const STEP_LIST = [1, 2, 3]
+
 const StepsNavBar = ({
   step,
   datasetId,
 }: IStepsNavBarProps) => {
   const { t } = useTranslation()
   const router = useRouter()
-  const navBackHandle = () => {
-    if (!datasetId) {
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
+  const navBackHandle = useCallback(() => {
+    if (!datasetId)
       router.replace('/datasets')
-    } else {
+    else
       router.replace(`/datasets/${datasetId}/documents`)
-    }
-  }
+  }, [router, datasetId])
 
   return (
     <div className='w-full pt-4'>
-      <div className={s.stepsHeader}>
-        <div onClick={navBackHandle} className={s.navBack} />
-        {!datasetId ? t('datasetCreation.steps.header.creation') : t('datasetCreation.steps.header.update')}
+      <div className={cn(s.stepsHeader, isMobile && '!px-0 justify-center')}>
+        <div onClick={navBackHandle} className={cn(s.navBack, isMobile && '!mr-0')} />
+        {!isMobile && (!datasetId ? t('datasetCreation.steps.header.creation') : t('datasetCreation.steps.header.update'))}
       </div>
-      <div className={cn(s.stepList)}>
-        <div className={cn(s.stepItem, s.step1, step === 1 && s.active, step !== 1 && s.done)}>
-          <div className={cn(s.stepNum)}>{step === 1 ? 1 : ''}</div>
-          <div className={cn(s.stepName)}>{t('datasetCreation.steps.one')}</div>
-        </div>
-        <div className={cn(s.stepItem, s.step2, step === 2 && s.active, step === 3 && s.done)}>
-          <div className={cn(s.stepNum)}>{step !== 3 ? 2 : ''}</div>
-          <div className={cn(s.stepName)}>{t('datasetCreation.steps.two')}</div>
-        </div>
-        <div className={cn(s.stepItem, s.step3, step === 3 && s.active)}>
-          <div className={cn(s.stepNum)}>3</div>
-          <div className={cn(s.stepName)}>{t('datasetCreation.steps.three')}</div>
-        </div>
+      <div className={cn(s.stepList, isMobile && '!p-0')}>
+        {STEP_LIST.map(item => (
+          <div
+            key={item}
+            className={cn(s.stepItem, s[`step${item}`], step === item && s.active, step > item && s.done, isMobile && 'px-0')}
+          >
+            <div className={cn(s.stepNum)}>{item}</div>
+            <div className={cn(s.stepName)}>{isMobile ? '' : t(STEP_T_MAP[item])}</div>
+          </div>
+        ))}
       </div>
     </div>
   )