46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import { elements, formatters, id, title, titles } from './config';
|
|
import { Container, Head } from '@/Components/Layout/Element';
|
|
import { useStore } from '@/stores/hooks';
|
|
import { toJS } from 'mobx';
|
|
import { observer } from 'mobx-react-lite';
|
|
import styled from 'styled-components';
|
|
import { Text } from 'ui/elements';
|
|
import { Grid } from 'ui/grid';
|
|
|
|
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 gridTemplateColumns={['1fr', '1fr 1fr']}>
|
|
{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,
|
|
};
|