contract tabs: use pre-existing tab component

web/components/contract/contract-tabs.tsx

@@ -9,6 +9,7 @@ import { useBets } from '../../hooks/use-bets'
 import { ContractActivity } from '../feed/contract-activity'
 import { ContractBetsTable, MyBetsSummary } from '../bets-list'
 import { Spacer } from '../layout/spacer'
+import { Tabs } from '../layout/tabs'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -18,8 +19,6 @@ export function ContractTabs(props: {
 }) {
   const { contract, user, comments } = props
 
-  const [tab, setTab] = useState('timeline')
-
   const bets = useBets(contract.id) ?? props.bets
   // Decending creation time.
   bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime)
@@ -48,31 +47,11 @@ export function ContractTabs(props: {
   )
 
   return (
-    <>
-      <div className="tabs">
-        <a
-          className={clsx(
-            'tab tab-bordered',
-            tab === 'timeline' && 'tab-active'
-          )}
-          onClick={() => setTab('timeline')}
-        >
-          Timeline
-        </a>
-        <a
-          className={clsx(
-            'tab tab-bordered',
-            tab === 'your-trades' && 'tab-active'
-          )}
-          onClick={() => setTab('your-trades')}
-        >
-          Your trades
-        </a>
-      </div>
-
-      <Spacer h={4} />
-
-      {tab === 'timeline' ? activity : yourTrades}
-    </>
+    <Tabs
+      tabs={[
+        { title: 'Timeline', content: activity },
+        { title: 'Your trades', content: yourTrades },
+      ]}
+    />
   )
 }