Skip to content

Commit 793baac

Browse files
HACO8888HACO8888
authored
v2.18.2 (#259)
2 parents b849e75 + 31070a1 commit 793baac

12 files changed

Lines changed: 436 additions & 702 deletions

File tree

‎app/(home)/mobile/ButtonTools.tsx‎

Lines changed: 17 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,57 +6,41 @@ type Props = {
66
};
77

88
const ButtonTools = ({ switchCallback, sigListCallback }: Props) => {
9-
const [buttonStyle, setButtonStyle] = useState("left-0");
10-
const [leftStyle, setLeftStyle] = useState(
11-
"w-[5rem] text-center duration-500 relative text-white h-[2.5rem]",
12-
);
13-
const [rightStyle, setRightStyle] = useState(
14-
"w-[5rem] text-center duration-500 relative text-md-dark-green h-[2.5rem]",
15-
);
9+
const [activeTab, setActiveTab] = useState<"latest" | "top">("latest");
1610

1711
return (
18-
<div className="flex flex-row justify-between items-center h-[4rem]">
19-
<div
20-
className={
21-
"flex bg-white bg-opacity-50 rounded-full relative select-none w-[10rem] my-3"
22-
}
23-
>
12+
<div className="flex flex-row justify-between items-center h-16 mb-2 md:mb-4">
13+
{/* Toggle Button */}
14+
<div className="flex bg-white/50 backdrop-blur-sm rounded-full relative select-none w-40">
2415
<div
25-
className={`transition-all duration-500 w-[5rem] h-[2.5rem] absolute bg-md-dark-green rounded-full ${buttonStyle}`}
26-
></div>
16+
className={`absolute w-20 h-10 bg-md-dark-green rounded-full transition-all duration-500 ${activeTab === "latest" ? "left-0" : "left-20"
17+
}`}
18+
/>
2719
<button
28-
className={leftStyle}
20+
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"
21+
}`}
2922
onClick={() => {
30-
setButtonStyle("left-0");
23+
setActiveTab("latest");
3124
switchCallback(1);
32-
setLeftStyle(
33-
"w-[5rem] text-center duration-500 relative text-white h-[2.5rem]",
34-
);
35-
setRightStyle(
36-
"w-[5rem] text-center duration-500 relative text-md-dark-green h-[2.5rem]",
37-
);
3825
}}
3926
>
4027
Latest
4128
</button>
4229
<button
43-
className={rightStyle}
30+
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"
31+
}`}
4432
onClick={() => {
45-
setButtonStyle("left-[5rem]");
33+
setActiveTab("top");
4634
switchCallback(0);
47-
setLeftStyle(
48-
"w-[5rem] text-center duration-500 relative text-md-dark-green h-[2.5rem]",
49-
);
50-
setRightStyle(
51-
"w-[5rem] text-center duration-500 relative text-white h-[2.5rem]",
52-
);
5335
}}
5436
>
5537
Top
5638
</button>
5739
</div>
40+
41+
{/* SIGs Button */}
5842
<button
59-
className="bg-white bg-opacity-50 rounded-full py-2 px-5 text-md-dark-green h-[2.5rem]"
43+
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"
6044
onClick={() => sigListCallback(true)}
6145
>
6246
SIGs
@@ -65,4 +49,4 @@ const ButtonTools = ({ switchCallback, sigListCallback }: Props) => {
6549
);
6650
};
6751

68-
export default ButtonTools;
52+
export default ButtonTools;

‎app/(home)/mobile/SigList.module.scss‎

Lines changed: 0 additions & 84 deletions
This file was deleted.

‎app/(home)/mobile/SigList.tsx‎

Lines changed: 74 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,30 @@
33
import { useEffect, useState } from "react";
44
import Link from "next/link";
55

6-
// Styles
7-
import style from "./SigList.module.scss";
8-
96
// Modules
107
import maxMatch from "@/modules/maxMatch";
118

129
const API_URL = process.env.NEXT_PUBLIC_API_URL;
1310

1411
const SIG = (child: any) => {
1512
return (
16-
<Link className={style.sig} href={`/@${child.customId}`}>
13+
<Link
14+
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"
15+
href={`/@${child.customId}`}
16+
>
17+
<div className="absolute inset-0 bg-white/0 group-hover:bg-white/10 rounded-2xl transition-colors duration-300" />
1718
{maxMatch(child.name).map((name, index) => (
18-
<p key={index}>{name}</p>
19+
<p key={index} className="text-white text-xs leading-3 font-semibold relative z-10 text-center">
20+
{name}
21+
</p>
1922
))}
2023
</Link>
2124
);
2225
};
2326

24-
const Information = ({ sigListToggle }: { sigListToggle: Function }) => {
27+
const SigList = ({ sigListToggle }: { sigListToggle: Function }) => {
2528
const [sigs, setSigs] = useState<any>([]);
29+
const [isLoading, setIsLoading] = useState(true);
2630

2731
useEffect(() => {
2832
(async () => {
@@ -33,33 +37,79 @@ const Information = ({ sigListToggle }: { sigListToggle: Function }) => {
3337
})
3438
).json();
3539

36-
return setSigs(res.data);
40+
setSigs(res.data);
41+
setIsLoading(false);
3742
} catch (error) {
3843
console.log(error);
44+
setIsLoading(false);
3945
}
4046
})();
4147
}, []);
4248

4349
return (
44-
<div className={style.popup}>
45-
<div className={style.outer} onClick={() => sigListToggle(false)}></div>
46-
<div className={style.overflow}>
47-
<div className={style.sigs}>
48-
{sigs.map((item: any) => {
49-
if (item._id !== "652d60b842cdf6a660c2b778") {
50-
return (
51-
<SIG
52-
_id={item._id}
53-
name={item.name}
54-
customId={item.customId}
55-
key={item._id}
56-
/>
57-
);
58-
}
59-
})}
50+
<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">
51+
{/* Outer overlay */}
52+
<div
53+
className="w-full h-full absolute top-0 left-0"
54+
onClick={() => sigListToggle(false)}
55+
/>
56+
57+
{/* Content */}
58+
<div className="bg-white/95 backdrop-blur-xl w-[90vw] max-w-md rounded-3xl shadow-2xl relative animate-slideUp overflow-hidden">
59+
{/* Header */}
60+
<div className="sticky top-0 bg-gradient-to-br from-[#6fa8ff] to-[#30b4ac] px-6 py-4 flex justify-between items-center z-10">
61+
<h2 className="text-white text-xl font-bold">探索 SIGs</h2>
62+
<button
63+
onClick={() => sigListToggle(false)}
64+
className="w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
65+
>
66+
<svg
67+
className="w-5 h-5 text-white"
68+
fill="none"
69+
strokeLinecap="round"
70+
strokeLinejoin="round"
71+
strokeWidth="2"
72+
viewBox="0 0 24 24"
73+
stroke="currentColor"
74+
>
75+
<path d="M6 18L18 6M6 6l12 12"></path>
76+
</svg>
77+
</button>
78+
</div>
79+
80+
{/* SIG Grid */}
81+
<div className="max-h-[60vh] overflow-y-auto custom-scrollbar p-6">
82+
{isLoading ? (
83+
<div className="flex justify-center items-center h-40">
84+
<div className="animate-spin rounded-full h-12 w-12 border-4 border-[#6fa8ff] border-t-transparent"></div>
85+
</div>
86+
) : (
87+
<div className="grid grid-cols-3 gap-4 place-items-center">
88+
{sigs.map((item: any) => {
89+
if (item._id !== "652d60b842cdf6a660c2b778") {
90+
return (
91+
<SIG
92+
_id={item._id}
93+
name={item.name}
94+
customId={item.customId}
95+
key={item._id}
96+
/>
97+
);
98+
}
99+
})}
100+
</div>
101+
)}
102+
</div>
103+
104+
{/* Footer */}
105+
<div className="sticky bottom-0 bg-gradient-to-t from-white/95 to-transparent px-6 py-3 text-center">
106+
<p className="text-gray-500 text-xs">
107+
選擇一個 SIG 來探索更多內容
108+
</p>
60109
</div>
61110
</div>
62111
</div>
63112
);
64113
};
65-
export default Information;
114+
115+
export default SigList;

‎app/(home)/mobile/Threads.module.scss‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎app/(home)/mobile/ThreadsList.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
"use client";
22
import { useState } from "react";
33

4-
//Components
4+
// Components
55
import {
66
InfinityThreadsList,
77
ThreadsListSkeleton,
88
} from "@/components/Threads/mobile/ThreadsList";
99
import SigList from "./SigList";
10-
11-
// Styles
12-
import styles from "./Threads.module.scss";
10+
import SwitchButton from "./ButtonTools";
1311

1412
// Interfaces
1513
import { useAllPost, useSigPost } from "@/utils/usePost";
16-
import SwitchButton from "./ButtonTools";
1714

1815
const ThreadsList = () => {
1916
const [showList, setShowList] = useState(false);
20-
2117
const [dataType, setDataType] = useState("latest");
22-
const pageSize = 15;
18+
const pageSize = 10;
19+
2320
const { data, fetchNextPage, isFetchingNextPage, isLoading } = useAllPost({
2421
pageSize,
2522
sort: dataType,
2623
});
24+
2725
const { data: announcementData } = useSigPost("652d60b842cdf6a660c2b778", {
2826
pageSize: 1,
2927
sort: "latest",
@@ -38,12 +36,14 @@ const ThreadsList = () => {
3836
}
3937

4038
return (
41-
<div className={styles.threadWrap}>
42-
{showList ? <SigList sigListToggle={setShowList} /> : <></>}
39+
<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">
40+
{showList && <SigList sigListToggle={setShowList} />}
41+
4342
<SwitchButton
4443
switchCallback={switchListType}
4544
sigListCallback={setShowList}
46-
></SwitchButton>
45+
/>
46+
4747
{isLoading ? (
4848
<ThreadsListSkeleton repeat={10} height="auto" />
4949
) : (
@@ -59,4 +59,4 @@ const ThreadsList = () => {
5959
);
6060
};
6161

62-
export default ThreadsList;
62+
export default ThreadsList;

0 commit comments

Comments
 (0)