62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import Locale from "@/app/locales";
|
|
import useMobileScreen from "@/app/hooks/useMobileScreen";
|
|
import MenuWrapper from "@/app/components/MenuWrapper";
|
|
|
|
import Panel from "./SettingPanel";
|
|
|
|
import GotoIcon from "@/app/icons/goto.svg";
|
|
|
|
export default MenuWrapper(function SettingList(props) {
|
|
const { setShowPanel } = props;
|
|
const isMobileScreen = useMobileScreen();
|
|
|
|
let layoutClassName = "pt-7 px-4";
|
|
let titleClassName = "pb-5";
|
|
let itemClassName = "";
|
|
|
|
if (isMobileScreen) {
|
|
layoutClassName = "h-[100%] mx-[-1.5rem] px-6 py-6 bg-blue-50";
|
|
titleClassName = "h-menu-title-mobile";
|
|
itemClassName = "p-4 bg-white";
|
|
}
|
|
|
|
return (
|
|
<div className={` ${layoutClassName}`}>
|
|
<div data-tauri-drag-region>
|
|
<div
|
|
className={`flex items-center justify-between ${titleClassName}`}
|
|
data-tauri-drag-region
|
|
>
|
|
<div className="text-setting-title text-black font-common font-setting-title">
|
|
{Locale.Settings.Title}
|
|
</div>
|
|
</div>
|
|
{/* <div className={`pb-3 text-sm sm:text-sm-mobile text-blue-500`}>
|
|
{Locale.Settings.SubTitle}
|
|
</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-black
|
|
// border-[1px] border-blue-200 border-opacity-0 rounded-md
|
|
// `}
|
|
className={`p-4 font-common text-setting-items font-normal text-black
|
|
border-[1px] border-blue-200 border-opacity-0 rounded-md
|
|
hover:border-opacity-100 hover:bg-blue-100 ${itemClassName}
|
|
flex justify-between items-center
|
|
`}
|
|
onClick={() => {
|
|
setShowPanel?.(true);
|
|
}}
|
|
>
|
|
{Locale.Settings.GeneralSettings}
|
|
{isMobileScreen && <GotoIcon />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}, Panel);
|