import { formatters, id, title, titles } from './config'; import { Container, Head } from '@/Components/Layout/Element'; import { useStore } from '@/stores/hooks'; import { min } from '@/styles/mq'; import { toJS } from 'mobx'; import { observer } from 'mobx-react-lite'; import styled from 'styled-components'; import Text from 'ui/elements/Text'; import { Box } from 'ui/grid'; 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 { Component: Results, id, title, };