57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { useState } from 'react';
|
|
import { useAppContext } from '../context/AppContext';
|
|
import { SettingsTab } from '../tabs/SettingsTab';
|
|
import { AdminTab } from '../tabs/AdminTab';
|
|
import { ConfigTab } from '../tabs/ConfigTab';
|
|
import { PageHeader } from '../components/ui/page-header';
|
|
|
|
type SettingsSection = 'Account' | 'Bot Config' | 'Admin Panel';
|
|
|
|
export function SettingsView() {
|
|
const { botState, isAdmin, socket } = useAppContext();
|
|
const sections: SettingsSection[] = [
|
|
'Account',
|
|
...(isAdmin ? ['Bot Config' as SettingsSection] : []),
|
|
...(isAdmin ? ['Admin Panel' as SettingsSection] : []),
|
|
];
|
|
const [section, setSection] = useState<SettingsSection>('Account');
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title="Settings"
|
|
description="Manage your account, credentials, and runtime configuration from one place."
|
|
/>
|
|
|
|
<div className="tab-strip" style={{ marginBottom: 24 }}>
|
|
{sections.map(s => (
|
|
<button
|
|
key={s}
|
|
onClick={() => setSection(s)}
|
|
className="tab-button"
|
|
data-active={section === s}
|
|
>
|
|
{s}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div
|
|
className="settings-legacy-surface"
|
|
style={{
|
|
background: 'var(--card)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: 24,
|
|
padding: 24,
|
|
boxShadow: 'var(--card-shadow)',
|
|
color: 'var(--foreground)',
|
|
}}
|
|
>
|
|
{section === 'Account' && <SettingsTab botState={botState} />}
|
|
{section === 'Bot Config' && isAdmin && <ConfigTab />}
|
|
{section === 'Admin Panel' && isAdmin && <AdminTab botState={botState} socket={socket} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|