Styling of home

components/home/SectionPreferences/SectionPreferences.tsx

@@ -0,0 +1,45 @@
+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>
+  )
+}