import { elements, 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'; import { Box } from 'ui/grid'; const Grid = styled(Box)` display: grid; grid-template-columns: 1fr; ${min('tablet')} { grid-template-columns: 1fr 1fr; } `; const Wrapper = styled.div` margin-bottom: 18px; `; const Results = observer(() => { const { $process, $results } = useStore(); const resultsValues = toJS($results.values); // eslint-disable-next-line no-negated-condition const values = !$process.has('Unlimited') ? elements.filter((x) => !x.startsWith('_')) : elements; return ( {values.map((valueName) => { const formatter = formatters[valueName]; const storeValue = resultsValues[valueName]; const value = formatter(storeValue); return ( {value} ); })} ); }); export default { Component: Results, id, title, };