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

fix: improve admin user detail tabs scroll and sync buttons design

Browse Source
This commit is contained in:
c0mrade
2026-02-01 23:49:52 +03:00
parent f6854c6c3a
commit 45dac039f9
1 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/AdminUserDetail.tsx
View File

@@ -36,13 +36,15 @@ const MinusIcon = () => (
</svg> </svg>
); );
const SyncIcon = ({ className = 'w-5 h-5' }: { className?: string }) => ( const ArrowDownIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
strokeLinecap="round" </svg>
strokeLinejoin="round" );
d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
/> const ArrowUpIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
</svg> </svg>
); );
@@ -310,12 +312,13 @@ export default function AdminUserDetail() {
</div> </div>
{/* Tabs */} {/* Tabs */}
<div className="mb-6 flex rounded-xl border border-dark-700 bg-dark-800/50"> <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) => ( {(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
<button <button
key={tab} key={tab}
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab)}
className={`flex-1 py-3 text-sm font-medium transition-colors ${ className={`flex-1 whitespace-nowrap px-4 py-3 text-sm font-medium transition-colors ${
activeTab === tab activeTab === tab
? 'border-b-2 border-accent-400 text-accent-400' ? 'border-b-2 border-accent-400 text-accent-400'
: 'text-dark-400 hover:text-dark-200' : 'text-dark-400 hover:text-dark-200'
@@ -328,6 +331,7 @@ export default function AdminUserDetail() {
</button> </button>
))} ))}
</div> </div>
</div>
{/* Content */} {/* Content */}
<div className="space-y-4"> <div className="space-y-4">
@@ -823,22 +827,26 @@ export default function AdminUserDetail() {
</div> </div>
{/* Sync buttons */} {/* Sync buttons */}
<div className="flex gap-3"> <div className="grid grid-cols-2 gap-3">
<button <button
onClick={handleSyncFromPanel} onClick={handleSyncFromPanel}
disabled={actionLoading} disabled={actionLoading}
className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/20 py-3 text-accent-400 transition-colors hover:bg-accent-500/30 disabled:opacity-50" className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
> >
<SyncIcon className={actionLoading ? 'animate-spin' : ''} /> <ArrowDownIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
<span className="text-center text-xs font-medium">
{t('admin.users.detail.sync.fromPanel')} {t('admin.users.detail.sync.fromPanel')}
</span>
</button> </button>
<button <button
onClick={handleSyncToPanel} onClick={handleSyncToPanel}
disabled={actionLoading} disabled={actionLoading}
className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/20 py-3 text-accent-400 transition-colors hover:bg-accent-500/30 disabled:opacity-50" className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
> >
<SyncIcon className={actionLoading ? 'animate-spin' : ''} /> <ArrowUpIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
<span className="text-center text-xs font-medium">
{t('admin.users.detail.sync.toPanel')} {t('admin.users.detail.sync.toPanel')}
</span>
</button> </button>
</div> </div>
</div> </div>