remove swipeable tabs from desktop views
This commit is contained in:
parent
3d777a4ab1
commit
1830986e40
|
@ -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
|
|
@ -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}%)`,
|
||||
|
|
|
@ -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 />
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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} />
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue