textmachine/frontend/src/showcase/Settings.tsx

33 lines
1.3 KiB
TypeScript

import { useText, type MessageKey } from '../i18n/text';
import { Modal } from '../ui/Modal';
import styles from './Settings.module.css';
/**
* Settings — with a modal window from the top right corner (remarks 11 and 19). Inside is the
* FRAME: the content is built by S7, and switches that switch nothing are buttons without an
* action, which the norm of the zone forbids (Ф-7/Ф-16).
*/
export function Settings({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
const text = useText();
return (
<Modal title={text('settings.title')} isOpen={isOpen} onClose={onClose}>
<dl className={styles.sections}>
{sections.map(([name, about]) => (
<div className={styles.section} key={name}>
<dt className={styles.name}>{text(name)}</dt>
<dd className={styles.about}>{text(about)}</dd>
</div>
))}
</dl>
<p className={styles.note}>{text('settings.note')}</p>
</Modal>
);
}
const sections: [MessageKey, MessageKey][] = [
['settings.profileName', 'settings.profileAbout'],
['settings.languageName', 'settings.languageAbout'],
['settings.themeName', 'settings.themeAbout'],
['settings.defaultsName', 'settings.defaultsAbout'],
['settings.usageName', 'settings.usageAbout'],
];