feat: add top tab bar to Instance settings panel
Renders tab pills (General, Streaming, Storage, Users) at the top of the content area, matching Discord's Family Center pattern. Works alongside the sidebar sub-links — both navigate the same tabs.
This commit is contained in:
@@ -34,8 +34,24 @@ export function InstancePanel() {
|
|||||||
fetchStreamingLimits();
|
fetchStreamingLimits();
|
||||||
}, [fetchInstanceSettings, fetchStreamingLimits]);
|
}, [fetchInstanceSettings, fetchStreamingLimits]);
|
||||||
|
|
||||||
|
const tabPillClass = (t: SubTab) =>
|
||||||
|
`px-3 py-1.5 text-sm rounded-md transition-colors ${
|
||||||
|
subTab === t
|
||||||
|
? 'text-txt-primary font-medium border-b-2 border-accent-primary'
|
||||||
|
: 'text-txt-tertiary hover:text-txt-secondary'
|
||||||
|
}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
|
{/* Top tab bar */}
|
||||||
|
<div className="flex gap-1 border-b border-white/[0.04] pb-0">
|
||||||
|
{SECTIONS.map((s) => (
|
||||||
|
<button key={s.id} onClick={() => setSubTab(s.id as SubTab)} className={tabPillClass(s.id as SubTab)}>
|
||||||
|
{s.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
{subTab === 'general' && <GeneralPanel />}
|
{subTab === 'general' && <GeneralPanel />}
|
||||||
{subTab === 'streaming' && <StreamingPanel />}
|
{subTab === 'streaming' && <StreamingPanel />}
|
||||||
{subTab === 'storage' && <StoragePanel />}
|
{subTab === 'storage' && <StoragePanel />}
|
||||||
|
|||||||
Reference in New Issue
Block a user