etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +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>
{/* Tabs */}
<div className="mb-6 overflow-x-auto rounded-xl border border-dark-700 bg-dark-800/50">
<div className="flex min-w-max">
{(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`flex-1 whitespace-nowrap px-4 py-3 text-sm font-medium transition-colors ${
activeTab === tab
? 'border-b-2 border-accent-400 text-accent-400'
: 'text-dark-400 hover:text-dark-200'
}`}
>
{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 === 'sync' && t('admin.users.detail.tabs.sync')}
</button>
))}
</div>
<div
className="scrollbar-hide -mx-4 mb-6 flex gap-2 overflow-x-auto px-4 py-1"
style={{ WebkitOverflowScrolling: 'touch' }}
>
{(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`shrink-0 whitespace-nowrap rounded-xl px-4 py-2.5 text-sm font-medium transition-all ${
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 === 'sync' && t('admin.users.detail.tabs.sync')}
</button>
))}
</div>
{/* Content */}