The weeb for the next gen discord boat - Wamellow wamellow.com
bot discord
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

tab lists add scroll button

Luna a7ed809e 5144d99e

+54 -4
+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