49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { NavLink, Outlet } from 'react-router';
|
||
|
|
|
||
|
|
import { SettingsSuspense } from '@/pages/settings/SettingsSection';
|
||
|
|
import { useCurrentUser } from '@/lib/hooks';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Вкладки настроек аккаунта и инстанса. Живут внутри `/settings/account/*`
|
||
|
|
* и выглядят так же, как панель выбора сервера в `/settings/servers/*`.
|
||
|
|
*/
|
||
|
|
export default function AccountSettingsLayout() {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const currentUser = useCurrentUser();
|
||
|
|
|
||
|
|
const tabs = [
|
||
|
|
{ to: 'profile', label: t('settings.tabs.profile') },
|
||
|
|
{ to: 'security', label: t('settings.tabs.security') },
|
||
|
|
{ to: 'appearance', label: t('settings.tabs.appearance') },
|
||
|
|
...(currentUser.data?.is_instance_admin === true
|
||
|
|
? [{ to: 'instance', label: t('settings.tabs.instance') }]
|
||
|
|
: []),
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<nav aria-label={t('settings.tabs.label')} className="flex flex-wrap gap-2">
|
||
|
|
{tabs.map((tab) => (
|
||
|
|
<NavLink
|
||
|
|
key={tab.to}
|
||
|
|
to={tab.to}
|
||
|
|
className={({ isActive }) =>
|
||
|
|
`rounded-[var(--radius-md)] border px-3 py-1.5 text-sm transition-colors duration-[var(--duration-fast)] ${
|
||
|
|
isActive
|
||
|
|
? 'border-accent bg-surface-3 text-fg'
|
||
|
|
: 'border-border/60 bg-surface-1 text-fg-muted hover:bg-surface-2 hover:text-fg'
|
||
|
|
}`
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{tab.label}
|
||
|
|
</NavLink>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
<SettingsSuspense>
|
||
|
|
<Outlet />
|
||
|
|
</SettingsSuspense>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|