Clean up crufty markup in tabs component

web/components/layout/tabs.tsx

@@ -1,8 +1,6 @@
 import clsx from 'clsx'
-import Link from 'next/link'
 import { useRouter, NextRouter } from 'next/router'
 import { ReactNode, useState } from 'react'
-import { Row } from './row'
 import { track } from '@amplitude/analytics-browser'
 
 type Tab = {
@@ -33,11 +31,13 @@ export function UncontrolledTabs(props: TabProps & { activeIndex: number }) {
   const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case
   return (
     <>
-      <div className={clsx('mb-4 border-b border-gray-200', className)}>
-        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+      <nav
+        className={clsx('mb-4 space-x-8 border-b border-gray-200', className)}
+        aria-label="Tabs"
+      >
         {tabs.map((tab, i) => (
-            <Link href="#" key={tab.title} shallow={false}>
           <a
+            href="#"
             key={tab.title}
             onClick={(e) => {
               e.preventDefault()
@@ -51,24 +51,19 @@ export function UncontrolledTabs(props: TabProps & { activeIndex: number }) {
               activeIndex === i
                 ? 'border-indigo-500 text-indigo-600'
                 : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-                  'cursor-pointer whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium',
+              'inline-flex cursor-pointer flex-row gap-1 whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium',
               labelClassName
             )}
             aria-current={activeIndex === i ? 'page' : undefined}
           >
-                <Row className={'items-center justify-center gap-1'}>
             {tab.tabIcon && <span>{tab.tabIcon}</span>}
             {tab.badge ? (
-                    <div className="px-0.5 font-bold">{tab.badge}</div>
+              <span className="px-0.5 font-bold">{tab.badge}</span>
             ) : null}
             {tab.title}
-                </Row>
           </a>
-            </Link>
         ))}
       </nav>
-      </div>
-
       {activeTab?.content}
     </>
   )

web/components/user-page.tsx

@@ -280,9 +280,9 @@ export function UserPage(props: { user: User; currentUser?: User }) {
                 title: 'Markets',
                 content: <CreatorContractsList creator={user} />,
                 tabIcon: (
-                  <div className="px-0.5 font-bold">
+                  <span className="px-0.5 font-bold">
                     {usersContracts.length}
-                  </div>
+                  </span>
                 ),
               },
               {
@@ -295,7 +295,9 @@ export function UserPage(props: { user: User; currentUser?: User }) {
                   />
                 ),
                 tabIcon: (
-                  <div className="px-0.5 font-bold">{usersComments.length}</div>
+                  <span className="px-0.5 font-bold">
+                    {usersComments.length}
+                  </span>
                 ),
               },
               {
@@ -313,7 +315,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
                     />
                   </div>
                 ),
-                tabIcon: <div className="px-0.5 font-bold">{betCount}</div>,
+                tabIcon: <span className="px-0.5 font-bold">{betCount}</span>,
               },
             ]}
           />