chore: show news feed history

wodeni · Jan 3, 2024 · 6523f08 · 6523f08
1 parent 5154b3f
commit 6523f08
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 19 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,7 +4,7 @@ import edgeworth from "./assets/edgeworth.svg";
 import mathdiagrams from "./assets/mathdiagrams.webp";
 import Balls from "./Balls";
 import Papers, { Paper } from "./Papers";
-import { HTMLProps, ReactNode, useEffect, useState } from "react";
+import { HTMLProps, ReactNode, useEffect, useRef, useState } from "react";
 import { HashLink } from "react-router-hash-link";
 import news from "./News";
 import A from "./A";
@@ -22,26 +22,55 @@ import theme from "./theme";
 
 const NewsFeed = () => {
   const today = new Date();
+  const [isScrolled, setIsScrolled] = useState(false);
+  const scrollableDivRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (scrollableDivRef.current !== null) {
+        const isAtTop = scrollableDivRef.current.scrollTop === 0;
+        setIsScrolled(!isAtTop);
+      }
+    };
+    if (scrollableDivRef.current !== null) {
+      const div = scrollableDivRef.current;
+      div.addEventListener("scroll", handleScroll);
+      // Cleanup function
+      return () => {
+        div.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, []);
+
   return (
-    <div className="my-2">
-      {news
-        .filter(
-          ({ time }) => time.getUTCFullYear() >= today.getUTCFullYear() - 1
-        )
-        .map(({ time, msg }, i) => (
-          <div
-            className="py-2 text-gray-500 md:text-sm dark:text-neutral-300"
-            key={`news-${i}`}
-          >
-            <div className="w-fit bg-gray-100 text-gray-400 rounded py-px px-1 dark:text-neutral-400 dark:bg-zinc-700">
-              {time.toLocaleString("default", {
-                month: "long",
-                year: "numeric",
-              })}
+    <div className="my-2 relative">
+      {isScrolled && (
+        <div className="invisible md:visible absolute top-0 left-0 right-0 h-10 bg-gradient-to-b from-white dark:from-zinc-800 to-transparent"></div>
+      )}
+      <div
+        ref={scrollableDivRef}
+        className="md:overflow-auto max-h-[50vh] scrollbar-hide"
+      >
+        {news
+          // .filter(
+          //   ({ time }) => time.getUTCFullYear() >= today.getUTCFullYear() - 1
+          // )
+          .map(({ time, msg }, i) => (
+            <div
+              className="py-2 text-gray-500 md:text-sm dark:text-neutral-300 "
+              key={`news-${i}`}
+            >
+              <div className="w-fit bg-gray-100 text-gray-400 rounded py-px px-1 dark:text-neutral-400 dark:bg-zinc-700">
+                {time.toLocaleString("default", {
+                  month: "long",
+                  year: "numeric",
+                })}
+              </div>
+              {msg}
             </div>
-            {msg}
-          </div>
-        ))}
+          ))}
+      </div>
+      <div className="invisible md:visible absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white dark:from-zinc-800 to-transparent"></div>
     </div>
   );
 };

diff --git a/src/index.css b/src/index.css
@@ -2,3 +2,14 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans");
+
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}