import style from "./SettingsModal.module.scss" ; import cs from "classnames" ; import { Modal } from "../../components/Utils/Modal" ; import { DisplaySettings } from "./DisplaySettings" ; import { TabsContainer } from "../../components/Layout/TabsContainer" ; import { TabDefinition } from "../../components/Layout/Tabs" ; import { PropsWithChildren , useContext } from "react" ; import { SettingsContext } from "../../context/Theme" ; interface PropsTabWrapper { className : string ; } function TabWrapper ( { children , ... props } ) { return ( < div { ... props } className = { cs ( props . className , style . tab ) } > { children } < /div>); } const SettingTabs = [ { name : "Display" } , { name : "Network" } ] ; interface Props { onClose : ( ) => void ; } export function SettingsModal ( { onClose , } ) { const settings = useContext ( SettingsContext ) ; return ( < Modal title = "Settings" onClose = { onClose } className = { cs ( style . root ) } > < TabsContainer tabDefinitions = { SettingTabs } tabWrapperComponent = { TabWrapper } > { ( { tabIndex } ) => ( < div className = { cs ( style . content ) } > { tabIndex === 0 ? ( < DisplaySettings settings = { settings } / > ) : tabIndex === 1 ? ( < div > Coming soon < /div>) : tabIndex === 2 ? (<div>2</div > ) : null } { } < /div>)} < /TabsContainer> < /Modal>); }