etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use pill-style tabs in admin user detail page

Browse Source
This commit is contained in:
c0mrade
2026-02-02 00:45:08 +03:00
parent 45dac039f9
commit 09584fc901
1 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/AdminUserDetail.tsx
View File

@@ -312,25 +312,26 @@ export default function AdminUserDetail() {
</div> </div>
{/* Tabs */} {/* Tabs */}
<div className="mb-6 overflow-x-auto rounded-xl border border-dark-700 bg-dark-800/50"> <div
<div className="flex min-w-max"> className="scrollbar-hide -mx-4 mb-6 flex gap-2 overflow-x-auto px-4 py-1"
{(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => ( style={{ WebkitOverflowScrolling: 'touch' }}
<button >
key={tab} {(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
onClick={() => setActiveTab(tab)} <button
className={`flex-1 whitespace-nowrap px-4 py-3 text-sm font-medium transition-colors ${ key={tab}
activeTab === tab onClick={() => setActiveTab(tab)}
? 'border-b-2 border-accent-400 text-accent-400' className={`shrink-0 whitespace-nowrap rounded-xl px-4 py-2.5 text-sm font-medium transition-all ${
: 'text-dark-400 hover:text-dark-200' activeTab === tab
}`} ? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/30'
> : 'bg-dark-800/50 text-dark-400 active:bg-dark-700'
{tab === 'info' && t('admin.users.detail.tabs.info')} }`}
{tab === 'subscription' && t('admin.users.detail.tabs.subscription')} >
{tab === 'balance' && t('admin.users.detail.tabs.balance')} {tab === 'info' && t('admin.users.detail.tabs.info')}
{tab === 'sync' && t('admin.users.detail.tabs.sync')} {tab === 'subscription' && t('admin.users.detail.tabs.subscription')}
</button> {tab === 'balance' && t('admin.users.detail.tabs.balance')}
))} {tab === 'sync' && t('admin.users.detail.tabs.sync')}
</div> </button>
))}
</div> </div>
{/* Content */} {/* Content */}