feat: added uplinks component

src/webui/components/UpLinks/index.js

@@ -0,0 +1,43 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import { Heading, ListItem, CardContent } from './styles';
+import List from '@material-ui/core/List';
+import Chip from '@material-ui/core/Chip';
+import Card from '@material-ui/core/Card';
+
+import React from 'react';
+
+class UpLinks extends React.PureComponent {
+  render() {
+    return <DetailContextConsumer>{({ packageMeta }) => this.renderContent(packageMeta._uplinks)}</DetailContextConsumer>;
+  }
+
+  renderList = (uplinks: object) => (
+    <List>
+      {Object.keys(uplinks)
+        .reverse()
+        .map(name => (
+          <ListItem key={name}>
+            <Chip label={name} />
+          </ListItem>
+        ))}
+    </List>
+  );
+
+  // $FlowFixMe
+  renderContent = uplinks =>
+    uplinks && (
+      <Card>
+        <CardContent>
+          <Heading variant={'subheading'}>{'UpLinks'}</Heading>
+          {this.renderList(uplinks)}
+        </CardContent>
+      </Card>
+    );
+}
+
+export default UpLinks;

src/webui/components/UpLinks/styles.js

@@ -0,0 +1,23 @@
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiListItem } from '@material-ui/core/ListItem';
+import { default as MuiCardContent } from '@material-ui/core/CardContent';
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+  }
+`;
+
+export const ListItem = styled(MuiListItem)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+
+export const CardContent = styled(MuiCardContent)`
+  && {
+    padding-bottom: 0;
+  }
+`;

src/webui/components/UpLinks/types.js

@@ -0,0 +1,6 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {}