You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
memos/web/src/components/SettingDialog.tsx

67 lines
1.8 KiB
TypeScript

import { useState } from "react";
import { showDialog } from "./Dialog";
import MyAccountSection from "./MyAccountSection";
import PreferencesSection from "./PreferencesSection";
import "../less/setting-dialog.less";
interface Props extends DialogProps {}
type SettingSection = "my-account" | "preferences";
interface State {
selectedSection: SettingSection;
}
const SettingDialog: React.FC<Props> = (props: Props) => {
const { destroy } = props;
const [state, setState] = useState<State>({
selectedSection: "my-account",
});
const handleSectionSelectorItemClick = (settingSection: SettingSection) => {
setState({
selectedSection: settingSection,
});
};
return (
<div className="dialog-content-container">
<button className="btn close-btn" onClick={destroy}>
<img className="icon-img" src="/icons/close.svg" />
</button>
<div className="section-selector-container">
<span
onClick={() => handleSectionSelectorItemClick("my-account")}
className={`section-item ${state.selectedSection === "my-account" ? "selected" : ""}`}
>
My account
</span>
<span
onClick={() => handleSectionSelectorItemClick("preferences")}
className={`section-item ${state.selectedSection === "preferences" ? "selected" : ""}`}
>
Preferences
</span>
</div>
<div className="section-content-container">
{state.selectedSection === "my-account" ? (
<MyAccountSection />
) : state.selectedSection === "preferences" ? (
<PreferencesSection />
) : null}
</div>
</div>
);
};
export default function showSettingDialog(): void {
showDialog(
{
className: "setting-dialog",
useAppContext: true,
},
SettingDialog,
{}
);
}