🚸 Improved responsiveness of ExploreTabs.tsx

Now on smaller screens, tab items will show arrows to navigate through
them from left to right.

packages/app/app/explore/components/ExploreTabs.tsx

@@ -1,12 +1,17 @@
 'use client'
+import { useState, useRef, useEffect } from 'react'
 import { Tabs, TabsTrigger, TabsList } from '@/components/ui/tabs'
 import useSearchParams from '@/lib/hooks/useSearchParams'
 import { useRouter } from 'next/navigation'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
 
 const ExploreTabs = () => {
-  const { handleTermChange, searchParams } = useSearchParams()
+  const { searchParams } = useSearchParams()
   const router = useRouter()
   const currentTerm = searchParams.get('searchQuery') || ''
+  const [showLeftArrow, setShowLeftArrow] = useState(false)
+  const [showRightArrow, setShowRightArrow] = useState(false)
+  const tabsListRef = useRef<HTMLDivElement>(null)
 
   const tabData = [
     { name: 'Home', searchQuery: '' },
@@ -28,22 +33,68 @@ const ExploreTabs = () => {
     router.push(newUrl)
   }
 
+  const checkForArrows = () => {
+    if (tabsListRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } =
+        tabsListRef.current
+      setShowLeftArrow(scrollLeft > 0)
+      setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
+    }
+  }
+
+  useEffect(() => {
+    checkForArrows()
+    window.addEventListener('resize', checkForArrows)
+    return () => window.removeEventListener('resize', checkForArrows)
+  }, [])
+
+  const scroll = (direction: 'left' | 'right') => {
+    if (tabsListRef.current) {
+      const scrollAmount = tabsListRef.current.clientWidth / 2
+      tabsListRef.current.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth',
+      })
+    }
+  }
+
   return (
-    <Tabs
-      defaultValue={currentTerm}
-      className="w-full"
-      onValueChange={handleTabChange}>
-      <TabsList className="flex flex-wrap justify-center">
-        {tabData.map((tab) => (
-          <TabsTrigger
-            key={tab.name}
-            value={tab.searchQuery}
-            className="px-4 py-2 text-sm font-medium">
-            {tab.name}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-    </Tabs>
+    <div className="relative w-full">
+      {showLeftArrow && (
+        <button
+          onClick={() => scroll('left')}
+          className="absolute left-0 top-1/2 z-10 -translate-y-1/2 rounded-xl bg-white p-1 shadow-md"
+          aria-label="Scroll left">
+          <ChevronLeft className="h-6 w-6" />
+        </button>
+      )}
+      {showRightArrow && (
+        <button
+          onClick={() => scroll('right')}
+          className="absolute right-0 top-1/2 z-10 -translate-y-1/2 rounded-xl bg-white p-1 shadow-md"
+          aria-label="Scroll right">
+          <ChevronRight className="h-6 w-6" />
+        </button>
+      )}
+      <Tabs
+        defaultValue={currentTerm}
+        className="w-full"
+        onValueChange={handleTabChange}>
+        <TabsList
+          ref={tabsListRef}
+          className="flex overflow-x-hidden overflow-y-hidden"
+          onScroll={checkForArrows}>
+          {tabData.map((tab) => (
+            <TabsTrigger
+              key={tab.name}
+              value={tab.searchQuery}
+              className="whitespace-nowrap px-4 py-2 text-sm font-medium">
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+    </div>
   )
 }