ChatGPT-Next-Web/app/containers/Settings/index.tsx

61 lines
1.6 KiB
TypeScript

import Locale from "@/app/locales";
import MenuLayout from "@/app/components/MenuLayout";
import Panel from "./SettingPanel";
import GotoIcon from "@/app/icons/goto.svg";
import { useAppConfig } from "@/app/store";
export default MenuLayout(function SettingList(props) {
const { setShowPanel } = props;
const config = useAppConfig();
const { isMobileScreen } = config;
return (
<div
className={`
px-6
max-md:h-[100%] max-md:mx-[-1.5rem] max-md:py-6 max-md:bg-settings-menu-mobile
md:pt-7 md:px-4
`}
>
<div data-tauri-drag-region>
<div
className={`
flex items-center justify-between
max-md:h-menu-title-mobile
md:pb-5
`}
data-tauri-drag-region
>
<div className="text-setting-title text-text-settings-menu-title font-common font-setting-title">
{Locale.Settings.Title}
</div>
</div>
</div>
<div
className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`}
>
<div
className={`
p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
border
border-opacity-0 rounded-md
hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected
flex justify-between items-center
max-md:bg-settings-menu-item-mobile
`}
onClick={() => {
setShowPanel?.(true);
}}
>
{Locale.Settings.GeneralSettings}
{isMobileScreen && <GotoIcon />}
</div>
</div>
</div>
);
}, Panel);