| 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> |
| ); |
| } |
|
|
