71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import { createSignal, type Component, type JSXElement } from "solid-js";
|
|
import { ISettingsModalViewProps } from "./types";
|
|
import SettingsProfilePage from "./pages/SettingsProfilePage/SettingsProfilePage";
|
|
import SettingsCommunitiesPage from "./pages/SettingsCommunitiesPage/SettingsCommunitiesPage";
|
|
import SettingsSessionPage from "./pages/SettingsSessionsPage/SettingsSessionsPage";
|
|
import { SettingsItem } from "../../components/SettingsItem";
|
|
import { Dynamic } from "solid-js/web";
|
|
|
|
const SettingsModalView: Component<ISettingsModalViewProps> = (
|
|
props: ISettingsModalViewProps,
|
|
) => {
|
|
const [getSelectedPage, setSelectedPage] = createSignal<string | undefined>(
|
|
undefined,
|
|
);
|
|
|
|
const pages = new Map<string, Component>([
|
|
["Profile", SettingsProfilePage],
|
|
["Sessions", SettingsSessionPage],
|
|
["Communities", SettingsCommunitiesPage],
|
|
]);
|
|
|
|
const getCurrentPage = (): JSXElement => {
|
|
const selectedPage = getSelectedPage();
|
|
|
|
if (selectedPage) {
|
|
return <Dynamic component={pages.get(selectedPage)} />;
|
|
} else {
|
|
return undefined;
|
|
}
|
|
};
|
|
|
|
const mapPageButton = (page: [string, Component]): JSXElement => (
|
|
<SettingsItem
|
|
id={page[0]}
|
|
text={page[0]}
|
|
active={page[0] === getSelectedPage()}
|
|
onClick={setSelectedPage}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<dialog
|
|
ref={props.dialogRef}
|
|
class="modal outline-none bg-[#00000050]"
|
|
>
|
|
<div class="modal-box w-10/12 max-w-5xl h-11/12 2xl:h-9/12 bg-stone-950 rounded-3xl">
|
|
<h3 class="text-lg font-bold text-center">Settings</h3>
|
|
<div class="divider"></div>
|
|
<div class="flex flex-col lg:flex-row gap-4 px-4 items-center lg:items-stretch">
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="text-lg font-bold text-center mb-4">
|
|
Categories
|
|
</h3>
|
|
{[...pages].map(mapPageButton)}
|
|
</div>
|
|
<div class="divider divider-vertical lg:divider-horizontal"></div>
|
|
{getCurrentPage()}
|
|
</div>
|
|
</div>
|
|
<form
|
|
onClick={props.onClose}
|
|
method="dialog"
|
|
class="modal-backdrop"
|
|
></form>
|
|
</dialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SettingsModalView;
|