The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
tab lists add scroll button
+54
-4
+54
-4
components/list.tsx
+54
-4
components/list.tsx
···
2
2
3
3
import { Tab, Tabs } from "@nextui-org/react";
4
4
import { usePathname, useRouter, useSearchParams } from "next/navigation";
5
-
import React from "react";
5
+
import React, { useEffect, useRef, useState } from "react";
6
6
7
7
import decimalToRgb from "@/utils/decimalToRgb";
8
+
import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
8
9
9
10
interface ListProps {
10
11
tabs: {
···
20
21
}
21
22
22
23
export function ListTab({ tabs, url, searchParamName, disabled, children }: ListProps) {
24
+
const [position, setPosition] = useState(0);
23
25
const path = usePathname();
24
26
const params = useSearchParams();
25
27
const router = useRouter();
28
+
const ref = useRef<HTMLDivElement | null>(null);
26
29
27
30
function handleChange(key: unknown) {
28
31
if (!key && typeof key !== "string") return;
···
40
43
router.push(`${url}?${newparams.toString()}`);
41
44
}
42
45
46
+
function scroll(direction: "left" | "right") {
47
+
if (!ref.current) return;
48
+
49
+
ref.current.scrollBy({
50
+
top: 0,
51
+
left: direction === "right"
52
+
? ref.current.clientWidth - position
53
+
: -position,
54
+
behavior: 'smooth',
55
+
});
56
+
};
57
+
58
+
function setScrollPosition() {
59
+
if (!ref.current) return;
60
+
const { scrollLeft } = ref.current;
61
+
setPosition(scrollLeft);
62
+
};
63
+
64
+
useEffect(() => {
65
+
if (!ref.current) return;
66
+
67
+
ref.current.addEventListener('scroll', setScrollPosition);
68
+
setScrollPosition();
69
+
70
+
return () => {
71
+
ref.current?.removeEventListener('scroll', setScrollPosition);
72
+
};
73
+
}, []);
74
+
43
75
return (
44
-
<div className="font-medium mt-2 mb-6">
76
+
<div className="font-medium mt-2 mb-6 flex items-center relative">
45
77
<Tabs
46
-
className="flex"
78
+
ref={ref}
79
+
className="flex w-full"
47
80
classNames={{
48
81
tabList: "w-full relative rounded-none p-0 border-b border-divider",
49
82
tab: "w-fit px-4 h-12 relative right-2.5"
···
69
102
}
70
103
/>
71
104
)}
72
-
{children && <li className="ml-auto">{children}</li>}
73
105
</Tabs>
106
+
107
+
{tabs.length > 4 && position > 0 &&
108
+
<button
109
+
className="absolute md:hidden top-1 left-0 bg-wamellow backdrop-blur-lg rounded-xl p-2"
110
+
onClick={() => scroll("left")}
111
+
>
112
+
<HiChevronLeft className="size-5" />
113
+
</button>
114
+
}
115
+
116
+
{tabs.length > 4 && position < (ref.current?.clientWidth || 0) &&
117
+
<button
118
+
className="absolute md:hidden top-1 right-0 bg-wamellow backdrop-blur-lg rounded-xl p-2"
119
+
onClick={() => scroll("right")}
120
+
>
121
+
<HiChevronRight className="size-5" />
122
+
</button>
123
+
}
74
124
</div>
75
125
);
76
126