Files
verse-quote-app/app/routes/settings.tsx
T

90 lines
2.5 KiB
TypeScript

import { ChangelogSettingsCard } from "@agent-native/core/client/changelog";
import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
import { TeamPage } from "@agent-native/core/client/org";
import {
AccountSettingsCard,
SettingsTabsPage,
useAgentSettingsTabs,
type SettingsSearchEntry,
} from "@agent-native/core/client/settings";
import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
import { useMemo } from "react";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { APP_TITLE } from "@/lib/app-config";
import changelog from "../../CHANGELOG.md?raw";
export function meta() {
return [{ title: `Settings - ${APP_TITLE}` }];
}
export default function SettingsRoute() {
const t = useT();
const agentSettingsTabs = useAgentSettingsTabs();
useSetPageTitle(t("settings.title"));
const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
() => [
{
id: "chat-language",
label: t("settings.languageTitle"),
keywords: "language locale translation i18n",
hash: "language",
},
],
[t],
);
return (
<SettingsTabsPage
account={<AccountSettingsCard />}
teamLabel={t("navigation.team")}
extraTabs={agentSettingsTabs}
generalSearchEntries={generalSearchEntries}
general={
<div className="mx-auto w-full max-w-2xl space-y-6">
<p className="text-sm leading-6 text-muted-foreground">
{t("settings.description")}
</p>
<Card id="language" className="scroll-mt-16">
<CardHeader>
<CardTitle className="text-base">
{t("settings.languageTitle")}
</CardTitle>
<CardDescription>
{t("settings.languageDescription")}
</CardDescription>
</CardHeader>
<CardContent className="max-w-xs space-y-1.5">
<Label>{t("settings.languageLabel")}</Label>
<LanguagePicker label={t("settings.languageLabel")} />
</CardContent>
</Card>
</div>
}
team={
<div className="mx-auto w-full max-w-3xl">
<TeamPage
showTitle={false}
createOrgDescription={t("pages.teamCreateOrgDescription")}
/>
</div>
}
whatsNew={
<div className="mx-auto w-full max-w-2xl">
<ChangelogSettingsCard markdown={changelog} />
</div>
}
/>
);
}