Files
node-factorio-recipes/components/home/SectionPreferences/SectionPreferences.tsx
Sebastian Seedorf d964748a66 Styling of home
2022-08-22 17:04:39 +02:00

46 lines
1.6 KiB
TypeScript

import { FC } from 'react'
import { FactorySelect } from '../FactorySelect/FactorySelect'
import { useGroups } from '../../contexts/GroupProvider'
import { I18n } from '../../shared/I18n/I18n'
import { Section } from '../../shared/Section/Section'
import { Heading } from '../../shared/Heading'
import { Paragraph } from '../../shared/Paragraph/Paragraph'
import { Collapsible } from '../../shared/Collapsible/Collapsible'
import styles from './SectionPreferences.module.css'
export const SectionPreferences: FC = () => {
const { baseFactories, setBaseFactories, ignoredFactories, setIgnoredFactories } = useGroups()
return (
<Section>
<Collapsible id={'collapseBase'}>
<Heading type={'section'}>
<I18n id={'page.home.pref.basic.title'} />
</Heading>
<Paragraph size={'subtitle'}>
<I18n id={'page.home.pref.basic.description'} />
</Paragraph>
<FactorySelect
id={'baseFactoriesSelect'}
factories={baseFactories}
onSetFactories={setBaseFactories}
fixInputs={true}
/>
</Collapsible>
<Collapsible id={'collapseIgnored'} className={styles.marginTop}>
<Heading type={'section'}>
<I18n id={'page.home.pref.ignored.title'} />
</Heading>
<Paragraph size={'subtitle'}>
<I18n id={'page.home.pref.ignored.description'} />
</Paragraph>
<FactorySelect
id={'ignoredFactoriesSelect'}
factories={ignoredFactories}
onSetFactories={setIgnoredFactories}
/>
</Collapsible>
</Section>
)
}