Switch to tabs for categories vs following

web/components/contract-search.tsx

@@ -22,10 +22,9 @@ import { Spacer } from './layout/spacer'
 import { ENV } from 'common/envs/constants'
 import { useUser } from 'web/hooks/use-user'
 import { useFollows } from 'web/hooks/use-follows'
-import { ChoicesToggleGroup } from './choices-toggle-group'
 import { EditCategoriesButton } from './feed/category-selector'
-import { Col } from './layout/col'
 import { CATEGORIES } from 'common/categories'
+import { Tabs } from './layout/tabs'
 
 const searchClient = algoliasearch(
   'GJQPAYENIF',
@@ -271,28 +270,33 @@ function CategoryFollowSelector(props: {
   const followingLabel = `Following ${follows.length}`
 
   return (
-    <Col className="gap-2">
-      <ChoicesToggleGroup
-        currentChoice={mode}
-        choicesMap={{
-          [categoriesLabel]: 'categories',
-          [followingLabel]: 'following',
-        }}
-        setChoice={(c) => setMode(c as 'categories' | 'following')}
-      />
-
-      {mode === 'categories' && user && (
-        <Row className="items-center gap-2 text-gray-500">
+    <Tabs
+      defaultIndex={mode === 'categories' ? 0 : 1}
+      tabs={[
+        {
+          title: categoriesLabel,
+          content: user && (
+            <Row className="items-center gap-1 text-gray-500">
               <div>{categoriesDescription}</div>
               <EditCategoriesButton className="self-start" user={user} />
             </Row>
-      )}
+          ),
+        },
+        ...(user
+          ? [
+              {
+                title: followingLabel,
 
-      {mode === 'following' && user && (
+                content: (
                   <Row className="h-8 items-center gap-2 text-gray-500">
-          <div>Showing markets created by users you are following.</div>
+                    <div>Showing markets by users you are following.</div>
                   </Row>
-      )}
-    </Col>
+                ),
+              },
+            ]
+          : []),
+      ]}
+      onClick={(_, index) => setMode(index === 0 ? 'categories' : 'following')}
+    />
   )
 }

web/components/layout/tabs.tsx

@@ -15,7 +15,7 @@ export function Tabs(props: {
   tabs: Tab[]
   defaultIndex?: number
   className?: string
-  onClick?: (tabName: string) => void
+  onClick?: (tabTitle: string, index: number) => void
 }) {
   const { tabs, defaultIndex, className, onClick } = props
   const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
@@ -34,7 +34,7 @@ export function Tabs(props: {
                     e.preventDefault()
                   }
                   setActiveIndex(i)
-                  onClick?.(tab.title)
+                  onClick?.(tab.title, i)
                 }}
                 className={clsx(
                   activeIndex === i