import { Container, Head } from 'Components/Layout/Element'; import { toJS } from 'mobx'; import { observer } from 'mobx-react-lite'; import { useStore } from 'stores/hooks'; import styled from 'styled-components'; import Text from 'ui/elements/Text'; import { Box } from 'ui/grid'; import { min } from 'ui/mq'; import { formatters, id, title, titles } from './config'; const Grid = styled(Box)` display: grid; grid-template-columns: 1fr; ${min('tablet')} { grid-template-columns: 1fr 1fr; } `; const Results = observer(() => { const { $results } = useStore(); const values = toJS($results.values); return ( {Object.keys(values).map((valueName) => { const formatter = formatters[valueName]; const storeValue = values[valueName]; const value = formatter(storeValue); return ( {value} ); })} ); }); export default { id, title, Component: Results, };