feat: handle scroll behavior on timeline

Signed-off-by: Ruihang Xia <waynestxia@gmail.com>

src/App.tsx

@@ -1,10 +1,14 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { mock_list } from './list'
 import { wikipedia_link_of_page, wikipedia_link_of_year } from './utils'
 
 function App() {
   const [list, setList] = useState<{ from: number, to: number, person: { desc: string, link: string | undefined, death: number | undefined }, other_people: { desc: string, link: string | undefined, death: number | undefined }[] }[]>([])
 
+  // const [currentIndex, setCurrentIndex] = useState(0)
+  const [currentTimelineHighlight, setCurrentTimelineHighlight] = useState(0)
+
+  // prepare (mock) data
   useEffect(() => {
     const fetchData = async () => {
       // const data = await build_list(100, 800)
@@ -15,41 +19,39 @@ function App() {
     fetchData()
   }, [])
 
+  const handleScrollDebug: React.UIEventHandler<HTMLDivElement> = (e) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.target as HTMLDivElement
+    const position = Math.ceil(
+      (scrollTop / (scrollHeight - clientHeight)) * 1000,
+    )
+    setCurrentTimelineHighlight(position)
+  }
+
   return (
-    <div className="container">
-      <div className="scroll-side">
-        <ul>
-          <table>
-            {list.map((item, _index) => (
-              <tr key={item.from}>
-                <th>
-                  <a href={wikipedia_link_of_year(item.from)}>{item.from}</a>
-                </th>
-                <th>
-                  {item.person.link !== undefined && (
-                    <a href={wikipedia_link_of_page(item.person.link)}>{item.person.desc}</a>
-                  )}
-                </th>
+    <div className="gallery">
+      <div className="progress-bar" onScroll={handleScrollDebug}>
+        vertical timeline
+        <table>
+          <tbody>
+            {Array.from({ length: 1000 }).map((_, index) => (
+              <tr key={index}>
+                <td>
+                  Row
+                  {index === currentTimelineHighlight ? 99999 : index}
+                </td>
               </tr>
             ))}
-          </table>
-        </ul>
-      </div>
-
-      <div className="header">
-
+          </tbody>
+        </table>
       </div>
 
-      <div className="main">
-
+      <div className="text-detail">
+        {/* <h1>{list[currentIndex].person.desc}</h1> */}
+        <p>description</p>
       </div>
 
-      <div className="aside">
-
-      </div>
-
-      <div className="footer">
-
+      <div className="photo">
+        some image
       </div>
     </div>
 

src/index.css

@@ -1,37 +1,47 @@
-.container {
-    height: 100svh;
-    width: 100svw;
-    display: grid;
-    grid-template-columns: 15% 40% 45%;
-    grid-template-rows: 10% 80% 10%;
-    grid-template-areas:
-        "scroll-side header header"
-        "scroll-side main aside"
-        "scroll-side footer footer";
+body {
+    margin: 0px;
 }
 
-.scroll-side {
-    grid-area: scroll-side;
-    background-color: #f0f0f0;
-    /* overflow-y: auto; */
+.gallery {
+    display: flex;
+    height: 100vh;
 }
 
-.header {
-    grid-area: header;
+.progress-bar {
+    flex: 1;
     background-color: #f0f0f0;
+
+    overflow-y: scroll;
+    scrollbar-width: none;
 }
 
-.main {
-    grid-area: main;
-    background-color: #f0f0f0;
+.content {
+    flex: 3;
+    display: flex;
+
+    overflow: hidden;
 }
 
-.aside {
-    grid-area: aside;
-    background-color: #f0f0f0;
+.text-detail {
+    flex: 2;
+    padding: 20px;
+    overflow-y: auto;
+
+    overflow: hidden;
 }
 
-.footer {
-    grid-area: footer;
-    background-color: #f0f0f0;
-}
+.photo {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+
+    overflow: hidden;
+}
+
+.photo img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}