46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { FC } from 'react'
|
|
import { GroupBox } from './GroupBox/GroupBox'
|
|
import styles from './Home.module.css'
|
|
import { useGroups } from '../contexts/GroupProvider'
|
|
import { SectionPreferences } from './SectionPreferences/SectionPreferences'
|
|
import { I18n } from '../shared/I18n/I18n'
|
|
import { Heading } from '../shared/Heading'
|
|
import { Paragraph } from '../shared/Paragraph/Paragraph'
|
|
import { Section } from '../shared/Section/Section'
|
|
import { SectionAddMissing } from './SectionAddMissing/SectionAddMissing'
|
|
import { SectionShare } from './SectionShare/SectionShare'
|
|
import { ButtonVisualize } from '../shared/ButtonVisualize/ButtonVisualize'
|
|
|
|
export const Home: FC = () => {
|
|
const { groups } = useGroups()
|
|
|
|
return (
|
|
<main>
|
|
<Section>
|
|
<Heading type={'pageTitle'}>
|
|
<I18n id={'page.home.title'} />
|
|
</Heading>
|
|
<Paragraph size={'large'}>
|
|
<I18n id={'page.home.description'} />
|
|
</Paragraph>
|
|
</Section>
|
|
<SectionShare />
|
|
<SectionPreferences />
|
|
<SectionAddMissing />
|
|
<Section>
|
|
<Heading type={'section'}>
|
|
<I18n id={'page.home.group.title'} />
|
|
<ButtonVisualize large={true} />
|
|
</Heading>
|
|
</Section>
|
|
<div className={styles.grid}>
|
|
{Object.values(groups)
|
|
.sort((a, b) => a.name.localeCompare(b.name))
|
|
.map(group => (
|
|
<GroupBox key={group.name} group={group} />
|
|
))}
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|