File size: 1,847 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | import { useTranslation } from "react-i18next";
import { Typography } from "#/ui/typography";
import { I18nKey } from "#/i18n/declaration";
import { SettingsNavRenderedItem } from "#/hooks/use-settings-nav-items";
import { SidebarNavLink } from "#/components/features/sidebar/sidebar-nav-link";
import { AgentCanvasUpdateCard } from "#/components/features/settings/agent-canvas-update-card";
import { BackendSyncedSettingsBadge } from "#/components/features/settings/backend-synced-settings-badge";
import { CloudSettingsLink } from "#/components/features/settings/cloud-settings-link";
import { IntegrationsSettingsLink } from "#/components/features/settings/integrations-settings-link";
interface SettingsMobileHubProps {
navigationItems: SettingsNavRenderedItem[];
}
export function SettingsMobileHub({ navigationItems }: SettingsMobileHubProps) {
const { t } = useTranslation("openhands");
const navItems = navigationItems.filter(
(item): item is Extract<SettingsNavRenderedItem, { type: "item" }> =>
item.type === "item",
);
return (
<div
data-testid="settings-mobile-hub"
className="flex flex-col gap-4 px-4 py-2 md:hidden"
>
<Typography.H2>{t(I18nKey.SETTINGS$TITLE)}</Typography.H2>
<nav className="flex flex-col gap-0.5">
{navItems.map((renderedItem) => (
<SidebarNavLink
key={renderedItem.item.to}
to={renderedItem.item.to}
label={t(renderedItem.item.text as I18nKey)}
end
testId={`sidebar-settings-${renderedItem.item.to}`}
icon={renderedItem.item.icon}
/>
))}
<IntegrationsSettingsLink />
<CloudSettingsLink />
</nav>
<AgentCanvasUpdateCard />
<div className="pt-1">
<BackendSyncedSettingsBadge />
</div>
</div>
);
}
|