initial commit

src/components/UpLinks/index.js

@@ -0,0 +1,50 @@
+/**
+ * @prettier
+ */
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import { formatDateDistance } from '../../utils/package';
+import { Heading, Spacer, ListItemText } from './styles';
+import List from '@material-ui/core/List/index';
+import ListItem from '@material-ui/core/ListItem/index';
+import React from 'react';
+
+class UpLinks extends React.PureComponent<any> {
+  render() {
+    return (
+      // $FlowFixMe
+      <DetailContextConsumer>
+        {({ packageMeta }) => {
+          return this.renderContent(packageMeta._uplinks);
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  renderUpLinksList = uplinks => (
+    <List>
+      {Object.keys(uplinks)
+        .reverse()
+        .map(name => (
+          <ListItem key={name}>
+            <ListItemText>{name}</ListItemText>
+            <Spacer />
+            <ListItemText>{`${formatDateDistance(uplinks[name].fetched)} ago`}</ListItemText>
+          </ListItem>
+        ))}
+    </List>
+  );
+
+  renderContent(uplinks) {
+    return (
+      uplinks && (
+        <>
+          <Heading variant={'subheading'}>{'Uplinks'}</Heading>
+          {this.renderUpLinksList(uplinks)}
+        </>
+      )
+    );
+  }
+}
+
+export default UpLinks;

src/components/UpLinks/styles.js

@@ -0,0 +1,25 @@
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiListItemText } from '@material-ui/core/ListItemText';
+
+export const Heading = styled(Typography)`
+ && {
+  font-weight: 700;
+ }
+`;
+
+export const Spacer = styled('div')`
+    flex: 1 1 auto;
+    border-bottom: 1px dotted rgba(0, 0, 0, .2);
+    white-space: nowrap;
+    height: 0.5em;
+`;
+
+export const ListItemText = styled(MuiListItemText)`
+    && {
+      flex: none;
+      color: black;
+      opacity: .6;
+    }
+`;
+

src/components/UpLinks/types.js

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