120 lines
3.7 KiB
TypeScript
120 lines
3.7 KiB
TypeScript
import {
|
|
Book,
|
|
BrainCircuit,
|
|
Orbit,
|
|
Share,
|
|
BlocksIcon,
|
|
InfoIcon
|
|
} from "lucide-react"
|
|
import { useTranslation } from "react-i18next"
|
|
import { Link, useLocation } from "react-router-dom"
|
|
import { OllamaIcon } from "../Icons/Ollama"
|
|
import { Tag } from "antd"
|
|
|
|
function classNames(...classes: string[]) {
|
|
return classes.filter(Boolean).join(" ")
|
|
}
|
|
|
|
const LinkComponent = (item: {
|
|
href: string
|
|
name: string | JSX.Element
|
|
icon: any
|
|
current: string
|
|
}) => {
|
|
return (
|
|
<li>
|
|
<Link
|
|
to={item.href}
|
|
className={classNames(
|
|
item.current === item.href
|
|
? "bg-gray-100 text-gray-600 dark:bg-[#262626] dark:text-white"
|
|
: "text-gray-700 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]",
|
|
"group flex gap-x-3 rounded-md py-2 pl-2 pr-3 text-sm font-semibold"
|
|
)}>
|
|
<item.icon
|
|
className={classNames(
|
|
item.current === item.href
|
|
? "text-gray-600 dark:text-white"
|
|
: "text-gray-400 group-hover:text-gray-600 dark:text-gray-200 dark:group-hover:text-white",
|
|
"h-6 w-6 shrink-0"
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
{item.name}
|
|
</Link>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
|
|
const location = useLocation()
|
|
const { t } = useTranslation(["settings", "common"])
|
|
|
|
return (
|
|
<>
|
|
<div className="mx-auto max-w-7xl lg:flex lg:gap-x-16 lg:px-8">
|
|
<aside className="flex lg:rounded-md bg-white lg:p-4 lg:mt-20 overflow-x-auto lg:border-0 border-b py-4 lg:block lg:w-72 lg:flex-none dark:bg-[#171717] dark:border-gray-600">
|
|
<nav className="flex-none px-4 sm:px-6 lg:px-0">
|
|
<ul
|
|
role="list"
|
|
className="flex gap-x-3 gap-y-1 whitespace-nowrap lg:flex-col">
|
|
<LinkComponent
|
|
href="/settings"
|
|
name={t("generalSettings.title")}
|
|
icon={Orbit}
|
|
current={location.pathname}
|
|
/>
|
|
<LinkComponent
|
|
href="/settings/ollama"
|
|
name={t("ollamaSettings.title")}
|
|
icon={OllamaIcon}
|
|
current={location.pathname}
|
|
/>
|
|
<LinkComponent
|
|
href="/settings/model"
|
|
name={t("manageModels.title")}
|
|
current={location.pathname}
|
|
icon={BrainCircuit}
|
|
/>
|
|
<LinkComponent
|
|
href="/settings/knowledge"
|
|
name={
|
|
<div className="inline-flex items-center gap-2">
|
|
{t("manageKnowledge.title")}
|
|
</div>
|
|
}
|
|
icon={BlocksIcon}
|
|
current={location.pathname}
|
|
/>
|
|
<LinkComponent
|
|
href="/settings/prompt"
|
|
name={t("managePrompts.title")}
|
|
icon={Book}
|
|
current={location.pathname}
|
|
/>
|
|
<LinkComponent
|
|
href="/settings/share"
|
|
name={t("manageShare.title")}
|
|
icon={Share}
|
|
current={location.pathname}
|
|
/>
|
|
<LinkComponent
|
|
href="/settings/about"
|
|
name={t("about.title")}
|
|
icon={InfoIcon}
|
|
current={location.pathname}
|
|
/>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main className={"px-4 py-16 sm:px-6 lg:flex-auto lg:px-0 lg:py-20"}>
|
|
<div className="mx-auto max-w-2xl space-y-16 sm:space-y-10 lg:mx-0 lg:max-w-none">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|