46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { IconButton } from '@/components/IconButton';
|
|
import { TitleBar, Title } from '@/components/TitleBar';
|
|
import { FunctionComponent } from 'preact';
|
|
import { Preferences } from './preferences';
|
|
import { PreferencesMenu } from './menu';
|
|
import { HelpAndFeedback } from './help-feedback';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
interface PreferencesViewProps {
|
|
close: () => void;
|
|
}
|
|
|
|
export const PreferencesCanvas: FunctionComponent<{
|
|
preferences: Preferences;
|
|
}> = observer(({ preferences: prefs }) => (
|
|
<div className="flex flex-row flex-grow min-h-0 justify-between">
|
|
<PreferencesMenu preferences={prefs}></PreferencesMenu>
|
|
{/* Temporary selector until a full solution is implemented */}
|
|
{prefs.selectedItem.label === 'Help & feedback' ? (
|
|
<HelpAndFeedback />
|
|
) : null}
|
|
</div>
|
|
));
|
|
|
|
export const PreferencesView: FunctionComponent<PreferencesViewProps> =
|
|
observer(({ close }) => {
|
|
const prefs = new Preferences();
|
|
return (
|
|
<div className="sn-full-screen flex flex-col bg-contrast z-index-preferences">
|
|
<TitleBar className="items-center justify-between">
|
|
{/* div is added so flex justify-between can center the title */}
|
|
<div className="h-8 w-8" />
|
|
<Title className="text-lg">Your preferences for Standard Notes</Title>
|
|
<IconButton
|
|
onClick={() => {
|
|
close();
|
|
}}
|
|
type="normal"
|
|
iconType="close"
|
|
/>
|
|
</TitleBar>
|
|
<PreferencesCanvas preferences={prefs} />
|
|
</div>
|
|
);
|
|
});
|