remove swipeable tabs from desktop views

This commit is contained in:
saml33 2021-09-20 13:21:55 +10:00
parent 3d777a4ab1
commit 1830986e40
4 changed files with 137 additions and 27 deletions

36
components/Tabs.tsx Normal file
View File

@ -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

View File

@ -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}%)`,

View File

@ -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 />
}
}

View File

@ -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} />
}
}