47 lines
1.1 KiB
JavaScript
47 lines
1.1 KiB
JavaScript
import { Container, Head } from 'Components/Layout/Element';
|
|
import Text from 'elements/Text';
|
|
import { toJS } from 'mobx';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useStore } from 'stores/hooks';
|
|
import styled from 'styled-components';
|
|
import { Box } from 'UIKit/grid';
|
|
import { min } from 'UIKit/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 (
|
|
<Grid>
|
|
{Object.keys(values).map((valueName) => {
|
|
const formatter = formatters[valueName];
|
|
const storeValue = values[valueName];
|
|
const value = formatter(storeValue);
|
|
|
|
return (
|
|
<Container key={valueName}>
|
|
<Head title={titles[valueName]} />
|
|
<Text>{value}</Text>
|
|
</Container>
|
|
);
|
|
})}
|
|
</Grid>
|
|
);
|
|
});
|
|
|
|
export default {
|
|
id,
|
|
title,
|
|
Component: Results,
|
|
};
|