Add Indicator to home. Optimize stylesheet.

src/components/common/FitCenter.tsx

@@ -12,7 +12,7 @@ const FitCenter: React.FC<FitCenterProps> = (props) => {
         <>
             <div
                 className={`fit-center${className ? ' ' + className : ''}${
-                    vertical ? ' direction-vertical' : ' direction-horizontal'
+                    vertical ? ' flex-vertical' : ' flex-horizontal'
                 }`}
                 {..._props}
             ></div>

src/components/common/Indicator.tsx

@@ -1,7 +1,39 @@
 import React from 'react'
+import _ from 'lodash'
+import '@/assets/css/components/common/indicator.scss'
 
-const Indicator: React.FC = () => {
-    return <></>
+interface IndicatorProps {
+    total: number
+    current: number
+    onSwitch?: (index: number) => void
+}
+
+const Indicator: React.FC<IndicatorProps> = (props) => {
+    const { total, current, onSwitch } = props
+
+    const handleClick = (index: number) => {
+        return () => {
+            onSwitch && onSwitch(index)
+        }
+    }
+
+    return (
+        <>
+            <ul className={'dot-list flex-vertical'}>
+                {_.range(0, total).map((_value, index) => {
+                    return (
+                        <li
+                            key={index}
+                            className={'item center-box' + (index === current ? ' active' : '')}
+                            onClick={handleClick(index)}
+                        >
+                            <div className={'dot'} />
+                        </li>
+                    )
+                })}
+            </ul>
+        </>
+    )
 }
 
 export default Indicator

src/components/home/index.tsx

@@ -10,7 +10,7 @@ import Indicator from '@/components/common/Indicator.tsx'
 const Home: React.FC = () => {
     const {
         hideScrollbarRef,
-        navbarHiddenState: { setNavbarHidden },
+        navbarHiddenState: { navbarHidden, setNavbarHidden },
         preventScrollState: { setPreventScroll }
     } = useContext(MainFrameworkContext)
 
@@ -124,6 +124,7 @@ const Home: React.FC = () => {
         if (event.key === 'ArrowDown') {
             handleScrollDown()
         }
+        console.log(content.length)
     }
 
     const content = [
@@ -152,8 +153,8 @@ const Home: React.FC = () => {
                 })}
             </div>
 
-            <div className={'indicator'}>
-                <Indicator />
+            <div hidden={navbarHidden} className={'indicator'}>
+                <Indicator total={content.length} current={currentContent} />
             </div>
         </>
     )