import React, { Component, ReactElement } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
import ListItemText from '@material-ui/core/ListItemText';
import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
import { Heading, EngineListItem } from './styles';
// @ts-ignore
import node from './img/node.png';
import npm from '../Install/img/npm.svg';
const ICONS = {
'node-JS': ,
'NPM-version': ,
};
class Engine extends Component {
public render(): ReactElement {
return (
{context => {
return this.renderEngine(context as VersionPageConsumerProps);
}}
);
}
private renderEngine = ({ packageMeta }): ReactElement | null => {
const { engines } = packageMeta.latest;
if (!engines) {
return null;
}
const engineDict = {
'node-JS': engines.node,
'NPM-version': engines.npm,
};
const accumulator: React.ReactNode[] = [];
const items = Object.keys(engineDict).reduce((markup, text, key) => {
const heading = engineDict[text];
if (heading) {
markup.push(
{this.renderListItems(heading, text)}
);
}
return markup;
}, accumulator);
if (items.length < 1) {
return null;
}
return {items};
};
private renderListItems = (heading, text) => {
return (
{text.split('-').join(' ')}}>
{ICONS[text]}
);
};
}
export default Engine;