v2.18.2

app/(home)/mobile/ButtonTools.tsx

@@ -6,57 +6,41 @@ type Props = {
 };
 
 const ButtonTools = ({ switchCallback, sigListCallback }: Props) => {
-  const [buttonStyle, setButtonStyle] = useState("left-0");
-  const [leftStyle, setLeftStyle] = useState(
-    "w-[5rem] text-center duration-500 relative text-white h-[2.5rem]",
-  );
-  const [rightStyle, setRightStyle] = useState(
-    "w-[5rem] text-center duration-500 relative text-md-dark-green h-[2.5rem]",
-  );
+  const [activeTab, setActiveTab] = useState<"latest" | "top">("latest");
 
   return (
-    <div className="flex flex-row justify-between items-center h-[4rem]">
-      <div
-        className={
-          "flex bg-white bg-opacity-50 rounded-full relative select-none w-[10rem] my-3"
-        }
-      >
+    <div className="flex flex-row justify-between items-center h-16 mb-2 md:mb-4">
+      {/* Toggle Button */}
+      <div className="flex bg-white/50 backdrop-blur-sm rounded-full relative select-none w-40">
         <div
-          className={`transition-all duration-500 w-[5rem] h-[2.5rem] absolute bg-md-dark-green rounded-full ${buttonStyle}`}
-        ></div>
+          className={`absolute w-20 h-10 bg-md-dark-green rounded-full transition-all duration-500 ${activeTab === "latest" ? "left-0" : "left-20"
+            }`}
+        />
         <button
-          className={leftStyle}
+          className={`w-20 text-center relative h-10 transition-colors duration-500 text-sm md:text-base ${activeTab === "latest" ? "text-white" : "text-md-dark-green"
+            }`}
           onClick={() => {
-            setButtonStyle("left-0");
+            setActiveTab("latest");
             switchCallback(1);
-            setLeftStyle(
-              "w-[5rem] text-center duration-500 relative text-white h-[2.5rem]",
-            );
-            setRightStyle(
-              "w-[5rem] text-center duration-500 relative text-md-dark-green h-[2.5rem]",
-            );
           }}
         >
           Latest
         </button>
         <button
-          className={rightStyle}
+          className={`w-20 text-center relative h-10 transition-colors duration-500 text-sm md:text-base ${activeTab === "top" ? "text-white" : "text-md-dark-green"
+            }`}
           onClick={() => {
-            setButtonStyle("left-[5rem]");
+            setActiveTab("top");
             switchCallback(0);
-            setLeftStyle(
-              "w-[5rem] text-center duration-500 relative text-md-dark-green h-[2.5rem]",
-            );
-            setRightStyle(
-              "w-[5rem] text-center duration-500 relative text-white h-[2.5rem]",
-            );
           }}
         >
           Top
         </button>
       </div>
+
+      {/* SIGs Button */}
       <button
-        className="bg-white bg-opacity-50 rounded-full py-2 px-5 text-md-dark-green h-[2.5rem]"
+        className="bg-white/50 backdrop-blur-sm rounded-full py-2 px-5 md:px-6 text-md-dark-green h-10 hover:bg-white/60 transition-colors text-sm md:text-base"
         onClick={() => sigListCallback(true)}
       >
         SIGs
@@ -65,4 +49,4 @@ const ButtonTools = ({ switchCallback, sigListCallback }: Props) => {
   );
 };
 
-export default ButtonTools;
+export default ButtonTools;

app/(home)/mobile/SigList.tsx

@@ -3,26 +3,30 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 
-// Styles
-import style from "./SigList.module.scss";
-
 // Modules
 import maxMatch from "@/modules/maxMatch";
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
 const SIG = (child: any) => {
   return (
-    <Link className={style.sig} href={`/@${child.customId}`}>
+    <Link
+      className="group relative w-20 h-20 flex-shrink-0 rounded-2xl bg-gradient-to-br from-[#6fa8ff] via-[#4a9dd4] to-[#30b4ac] p-2 flex flex-col items-center justify-center hover:scale-110 hover:shadow-lg transition-all duration-300 hover:rotate-3"
+      href={`/@${child.customId}`}
+    >
+      <div className="absolute inset-0 bg-white/0 group-hover:bg-white/10 rounded-2xl transition-colors duration-300" />
       {maxMatch(child.name).map((name, index) => (
-        <p key={index}>{name}</p>
+        <p key={index} className="text-white text-xs leading-3 font-semibold relative z-10 text-center">
+          {name}
+        </p>
       ))}
     </Link>
   );
 };
 
-const Information = ({ sigListToggle }: { sigListToggle: Function }) => {
+const SigList = ({ sigListToggle }: { sigListToggle: Function }) => {
   const [sigs, setSigs] = useState<any>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     (async () => {
@@ -33,33 +37,79 @@ const Information = ({ sigListToggle }: { sigListToggle: Function }) => {
           })
         ).json();
 
-        return setSigs(res.data);
+        setSigs(res.data);
+        setIsLoading(false);
       } catch (error) {
         console.log(error);
+        setIsLoading(false);
       }
     })();
   }, []);
 
   return (
-    <div className={style.popup}>
-      <div className={style.outer} onClick={() => sigListToggle(false)}></div>
-      <div className={style.overflow}>
-        <div className={style.sigs}>
-          {sigs.map((item: any) => {
-            if (item._id !== "652d60b842cdf6a660c2b778") {
-              return (
-                <SIG
-                  _id={item._id}
-                  name={item.name}
-                  customId={item.customId}
-                  key={item._id}
-                />
-              );
-            }
-          })}
+    <div className="fixed top-0 left-0 h-screen w-screen bg-black/70 backdrop-blur-sm grid place-items-center z-[999999] animate-fadeIn">
+      {/* Outer overlay */}
+      <div
+        className="w-full h-full absolute top-0 left-0"
+        onClick={() => sigListToggle(false)}
+      />
+
+      {/* Content */}
+      <div className="bg-white/95 backdrop-blur-xl w-[90vw] max-w-md rounded-3xl shadow-2xl relative animate-slideUp overflow-hidden">
+        {/* Header */}
+        <div className="sticky top-0 bg-gradient-to-br from-[#6fa8ff] to-[#30b4ac] px-6 py-4 flex justify-between items-center z-10">
+          <h2 className="text-white text-xl font-bold">探索 SIGs</h2>
+          <button
+            onClick={() => sigListToggle(false)}
+            className="w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
+          >
+            <svg
+              className="w-5 h-5 text-white"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+
+        {/* SIG Grid */}
+        <div className="max-h-[60vh] overflow-y-auto custom-scrollbar p-6">
+          {isLoading ? (
+            <div className="flex justify-center items-center h-40">
+              <div className="animate-spin rounded-full h-12 w-12 border-4 border-[#6fa8ff] border-t-transparent"></div>
+            </div>
+          ) : (
+            <div className="grid grid-cols-3 gap-4 place-items-center">
+              {sigs.map((item: any) => {
+                if (item._id !== "652d60b842cdf6a660c2b778") {
+                  return (
+                    <SIG
+                      _id={item._id}
+                      name={item.name}
+                      customId={item.customId}
+                      key={item._id}
+                    />
+                  );
+                }
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="sticky bottom-0 bg-gradient-to-t from-white/95 to-transparent px-6 py-3 text-center">
+          <p className="text-gray-500 text-xs">
+            選擇一個 SIG 來探索更多內容
+          </p>
         </div>
       </div>
     </div>
   );
 };
-export default Information;
+
+export default SigList;

app/(home)/mobile/ThreadsList.tsx

@@ -1,29 +1,27 @@
 "use client";
 import { useState } from "react";
 
-//Components
+// Components
 import {
   InfinityThreadsList,
   ThreadsListSkeleton,
 } from "@/components/Threads/mobile/ThreadsList";
 import SigList from "./SigList";
-
-// Styles
-import styles from "./Threads.module.scss";
+import SwitchButton from "./ButtonTools";
 
 // Interfaces
 import { useAllPost, useSigPost } from "@/utils/usePost";
-import SwitchButton from "./ButtonTools";
 
 const ThreadsList = () => {
   const [showList, setShowList] = useState(false);
-
   const [dataType, setDataType] = useState("latest");
-  const pageSize = 15;
+  const pageSize = 10;
+
   const { data, fetchNextPage, isFetchingNextPage, isLoading } = useAllPost({
     pageSize,
     sort: dataType,
   });
+
   const { data: announcementData } = useSigPost("652d60b842cdf6a660c2b778", {
     pageSize: 1,
     sort: "latest",
@@ -38,12 +36,14 @@ const ThreadsList = () => {
   }
 
   return (
-    <div className={styles.threadWrap}>
-      {showList ? <SigList sigListToggle={setShowList} /> : <></>}
+    <div className="w-full h-auto pt-16 pb-16 px-2 sm:px-4 md:px-6 lg:px-8 max-w-7xl mx-auto relative overflow-y-auto scrollbar-hide">
+      {showList && <SigList sigListToggle={setShowList} />}
+
       <SwitchButton
         switchCallback={switchListType}
         sigListCallback={setShowList}
-      ></SwitchButton>
+      />
+
       {isLoading ? (
         <ThreadsListSkeleton repeat={10} height="auto" />
       ) : (
@@ -59,4 +59,4 @@ const ThreadsList = () => {
   );
 };
 
-export default ThreadsList;
+export default ThreadsList;