remove swipeable tabs from desktop views

components/Tabs.tsx

@@ -0,0 +1,36 @@
+const Tabs = ({ activeTab, onChange, tabs }) => {
+  return (
+    <div className={`border-b border-th-fgd-4 mb-4 relative`}>
+      <div
+        className={`absolute bg-th-primary bottom-[-1px] default-transition left-0 h-0.5`}
+        style={{
+          maxWidth: '176px',
+          transform: `translateX(${
+            tabs.findIndex((v) => v === activeTab) * 100
+          }%)`,
+          width: `${100 / tabs.length}%`,
+        }}
+      />
+      <nav className="-mb-px flex" aria-label="Tabs">
+        {tabs.map((tabName) => (
+          <a
+            key={tabName}
+            onClick={() => onChange(tabName)}
+            className={`cursor-pointer default-transition flex font-semibold justify-center pb-4 pt-2 relative whitespace-nowrap hover:opacity-100
+                    ${
+                      activeTab === tabName
+                        ? `text-th-primary`
+                        : `text-th-fgd-4 hover:text-th-primary`
+                    }
+                  `}
+            style={{ width: `${100 / tabs.length}%`, maxWidth: '176px' }}
+          >
+            {tabName}
+          </a>
+        ))}
+      </nav>
+    </div>
+  )
+}
+
+export default Tabs

components/mobile/SwipeableTabs.tsx

@@ -1,7 +1,7 @@
 const SwipeableTabs = ({ onChange, tabs, tabIndex }) => (
   <div className={`border-b border-th-fgd-4 mb-4 relative`}>
     <div
-      className={`absolute bg-th-primary bottom-[-1px] default-transition left-0 h-0.5 w-16`}
+      className={`absolute bg-th-primary bottom-[-1px] default-transition left-0 h-0.5`}
       style={{
         maxWidth: '176px',
         transform: `translateX(${tabIndex * 100}%)`,

pages/account.tsx

@@ -20,6 +20,9 @@ import EmptyState from '../components/EmptyState'
 import Loading from '../components/Loading'
 import SwipeableTabs from '../components/mobile/SwipeableTabs'
 import Swipeable from '../components/mobile/Swipeable'
+import Tabs from '../components/Tabs'
+import { useViewport } from '../hooks/useViewport'
+import { breakpoints } from '../components/TradePageGrid'
 
 const TABS = [
   'Portfolio',
@@ -40,6 +43,9 @@ export default function Account() {
   const wallet = useMangoStore((s) => s.wallet.current)
   const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
   const [viewIndex, setViewIndex] = useState(0)
+  const [activeTab, setActiveTab] = useState(TABS[0])
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.sm : false
 
   const handleCloseAccounts = useCallback(() => {
     setShowAccountsModal(false)
@@ -66,6 +72,10 @@ export default function Account() {
     setViewIndex(index)
   }
 
+  const handleTabChange = (tabName) => {
+    setActiveTab(tabName)
+  }
+
   return (
     <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
       <TopBar />
@@ -122,25 +132,40 @@ export default function Account() {
           ) : null}
         </div>
         {mangoAccount ? (
-          <SwipeableTabs
-            onChange={handleChangeViewIndex}
-            tabs={TABS}
-            tabIndex={viewIndex}
-          />
+          !isMobile ? (
+            <Tabs
+              activeTab={activeTab}
+              onChange={handleTabChange}
+              tabs={TABS}
+            />
+          ) : (
+            <SwipeableTabs
+              onChange={handleChangeViewIndex}
+              tabs={TABS}
+              tabIndex={viewIndex}
+            />
+          )
         ) : null}
         <div className="bg-th-bkg-2 p-4 sm:p-6 rounded-lg">
           {mangoAccount ? (
-            <Swipeable index={viewIndex} onChangeIndex={handleChangeViewIndex}>
-              <div>
-                <AccountOverview />
-              </div>
-              <div>
-                <AccountOrders />
-              </div>
-              <div>
-                <AccountHistory />
-              </div>
-            </Swipeable>
+            !isMobile ? (
+              <TabContent activeTab={activeTab} />
+            ) : (
+              <Swipeable
+                index={viewIndex}
+                onChangeIndex={handleChangeViewIndex}
+              >
+                <div>
+                  <AccountOverview />
+                </div>
+                <div>
+                  <AccountOrders />
+                </div>
+                <div>
+                  <AccountHistory />
+                </div>
+              </Swipeable>
+            )
           ) : connected ? (
             isLoading ? (
               <div className="flex justify-center py-10">
@@ -181,3 +206,16 @@ export default function Account() {
     </div>
   )
 }
+
+const TabContent = ({ activeTab }) => {
+  switch (activeTab) {
+    case 'Portfolio':
+      return <AccountOverview />
+    case 'Orders':
+      return <AccountOrders />
+    case 'Trade History':
+      return <AccountHistory />
+    default:
+      return <AccountOverview />
+  }
+}

pages/stats.tsx

@@ -7,6 +7,9 @@ import StatsPerps from '../components/stats-page/StatsPerps'
 import useMangoStats from '../hooks/useMangoStats'
 import Swipeable from '../components/mobile/Swipeable'
 import SwipeableTabs from '../components/mobile/SwipeableTabs'
+import Tabs from '../components/Tabs'
+import { useViewport } from '../hooks/useViewport'
+import { breakpoints } from '../components/TradePageGrid'
 
 const TABS = [
   'Totals',
@@ -19,11 +22,18 @@ const TABS = [
 export default function StatsPage() {
   const { latestStats, stats, perpStats } = useMangoStats()
   const [viewIndex, setViewIndex] = useState(0)
+  const [activeTab, setActiveTab] = useState(TABS[0])
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.sm : false
 
   const handleChangeViewIndex = (index) => {
     setViewIndex(index)
   }
 
+  const handleTabChange = (tabName) => {
+    setActiveTab(tabName)
+  }
+
   return (
     <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
       <TopBar />
@@ -31,19 +41,45 @@ export default function StatsPage() {
         <div className="flex flex-col sm:flex-row py-4 md:pb-4 md:pt-10">
           <h1 className={`text-th-fgd-1 text-2xl font-semibold`}>Stats</h1>
         </div>
-        <SwipeableTabs
-          onChange={handleChangeViewIndex}
-          tabs={TABS}
-          tabIndex={viewIndex}
-        />
+        {!isMobile ? (
+          <Tabs activeTab={activeTab} onChange={handleTabChange} tabs={TABS} />
+        ) : (
+          <SwipeableTabs
+            onChange={handleChangeViewIndex}
+            tabs={TABS}
+            tabIndex={viewIndex}
+          />
+        )}
         <div className="bg-th-bkg-2 p-4 sm:p-6 rounded-lg">
-          <Swipeable index={viewIndex} onChangeIndex={handleChangeViewIndex}>
-            <StatsTotals latestStats={latestStats} stats={stats} />
-            <StatsAssets latestStats={latestStats} stats={stats} />
-            <StatsPerps perpStats={perpStats} />
-          </Swipeable>
+          {!isMobile ? (
+            <TabContent
+              activeTab={activeTab}
+              latestStats={latestStats}
+              perpStats={perpStats}
+              stats={stats}
+            />
+          ) : (
+            <Swipeable index={viewIndex} onChangeIndex={handleChangeViewIndex}>
+              <StatsTotals latestStats={latestStats} stats={stats} />
+              <StatsAssets latestStats={latestStats} stats={stats} />
+              <StatsPerps perpStats={perpStats} />
+            </Swipeable>
+          )}
         </div>
       </PageBodyContainer>
     </div>
   )
 }
+
+const TabContent = ({ activeTab, latestStats, perpStats, stats }) => {
+  switch (activeTab) {
+    case 'Totals':
+      return <StatsTotals latestStats={latestStats} stats={stats} />
+    case 'Assets':
+      return <StatsAssets latestStats={latestStats} stats={stats} />
+    case 'Perps':
+      return <StatsPerps perpStats={perpStats} />
+    default:
+      return <StatsTotals latestStats={latestStats} stats={stats} />
+  }
+}