56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
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 { $results, $process } = 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 (
|
|
<Grid>
|
|
{values.map((valueName) => {
|
|
const formatter = formatters[valueName];
|
|
const storeValue = resultsValues[valueName];
|
|
const value = formatter(storeValue);
|
|
|
|
return (
|
|
<Wrapper key={valueName}>
|
|
<Container key={valueName}>
|
|
<Head title={titles[valueName]} />
|
|
<Text>{value}</Text>
|
|
</Container>
|
|
</Wrapper>
|
|
);
|
|
})}
|
|
</Grid>
|
|
);
|
|
});
|
|
|
|
export default {
|
|
Component: Results,
|
|
id,
|
|
title,
|
|
};
|