initial commit

src/components/Repository/index.js

@@ -0,0 +1,64 @@
+/* eslint no-unused-vars: 0 */
+/* eslint react/jsx-max-depth: 0 */
+
+import React, {Component, Fragment} from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import Grid from '@material-ui/core/Grid/index';
+import GitHub from '../../icons/GitHub';
+import CopyToClipBoard from '../CopyToClipBoard';
+import BugReport from '@material-ui/icons/BugReport';
+import CardActions from '@material-ui/core/CardActions/index';
+import Button from '@material-ui/core/Button';
+import {GridRepo} from './styles';
+
+class Repository extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => {
+          return this.renderAuthor(context);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderAuthor = ({packageMeta}) => {
+    const { repository, bugs } = packageMeta.latest;
+    if (!repository) {
+      return null;
+    }
+
+    return (
+      <Card>
+        <CardContent style={{ textAling: 'center'}}>
+          <GridRepo container={true} spacing={24}>
+            {this.renderRepository(repository, bugs)}
+          </GridRepo>
+        </CardContent>
+        <CardActions>
+          <Button size={"small"}>{'Open Bugs'}</Button>
+          <Button size={"small"}>{'Open Repository'}</Button>
+        </CardActions>
+      </Card>
+    );
+  }
+
+  renderRepository = ({url, type}, bugs) => {
+    return (
+      <Fragment>
+        <Grid item={true} xs={3}>
+          <GitHub style={{ fontSize: 45 }} />
+        </Grid>
+        <Grid item={true} xs={9}>
+          <CopyToClipBoard text={url} />
+        </Grid>
+      </Fragment>
+    );
+  }
+}
+
+
+export default Repository;

src/components/Repository/styles.js

@@ -0,0 +1,13 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import Grid from '@material-ui/core/Grid/index';
+
+export const GridRepo = styled(Grid)`
+  && {
+    align-items: center;
+  }
+`;