2022-09-21 22:28:53 -07:00
|
|
|
import TabButtons from '@components/shared/TabButtons'
|
2022-09-20 13:05:50 -07:00
|
|
|
import { useState } from 'react'
|
|
|
|
import Orderbook from './Orderbook'
|
|
|
|
import RecentTrades from './RecentTrades'
|
|
|
|
|
2022-09-28 13:02:12 -07:00
|
|
|
const TABS: [string, number][] = [
|
|
|
|
['book', 0],
|
|
|
|
['trades', 0],
|
|
|
|
]
|
|
|
|
|
2022-09-20 13:05:50 -07:00
|
|
|
const OrderbookAndTrades = () => {
|
|
|
|
const [activeTab, setActiveTab] = useState('book')
|
|
|
|
return (
|
|
|
|
<div className="hide-scroll h-full">
|
2022-09-21 22:28:53 -07:00
|
|
|
<div className="border-b border-r border-th-bkg-3">
|
|
|
|
<TabButtons
|
|
|
|
activeValue={activeTab}
|
|
|
|
onChange={(tab: string) => setActiveTab(tab)}
|
2022-09-28 13:02:12 -07:00
|
|
|
values={TABS}
|
2022-09-21 22:28:53 -07:00
|
|
|
fillWidth
|
|
|
|
/>
|
2022-09-20 13:05:50 -07:00
|
|
|
</div>
|
|
|
|
<div className={`h-full ${activeTab === 'book' ? 'visible' : 'hidden'}`}>
|
|
|
|
<Orderbook />
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
className={`h-full ${activeTab === 'trades' ? 'visible' : 'hidden'}`}
|
|
|
|
>
|
|
|
|
<RecentTrades />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default OrderbookAndTrades
|