initial commit

src/components/Developers/index.js

@@ -0,0 +1,67 @@
+import React, {Component} from 'react';
+
+import { DetailContextConsumer } from '../../pages/version';
+import Card from '@material-ui/core/Card';
+import Avatar from '@material-ui/core/Avatar';
+import Tooltip from '@material-ui/core/Tooltip';
+import Add from '@material-ui/icons/Add';
+import { Details, Heading, Content, CardContent, Fab } from './styles';
+
+interface Props {
+  type: 'contributors' | 'maintainers'
+}
+
+class Developers extends Component<Props, any> {
+  state = {
+    visibleDevs: 6,
+  };
+
+  render() {
+    return (
+      <DetailContextConsumer>
+        {({ packageMeta }) => {
+          const { type } = this.props;
+          const developerType = packageMeta.latest[type];
+          if (!developerType || developerType.length === 0) return null;
+          return this.renderDevelopers(developerType);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderDevelopers = (developers) => {
+    const { type } = this.props;
+    const { visibleDevs } = this.state;
+    return (
+      <Card>
+        <CardContent>
+          <Heading variant={'subheading'}>{type}</Heading>
+          <Content>
+            {developers.slice(0, visibleDevs).map(developer => (
+              <Details key={developer.email}>{this.renderDeveloperDetails(developer)}</Details>
+            ))}
+            {visibleDevs < developers.length &&
+              <Fab onClick={this.handleLoadMore} size={'small'}><Add /></Fab>
+            }
+          </Content>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  renderDeveloperDetails= ({name, avatar }) => {
+    return (
+      <Tooltip title={name}>
+        <Avatar aria-label={name} src={avatar} />
+      </Tooltip>
+    );
+  }
+
+  handleLoadMore = () => {
+    this.setState((prev) => ({ visibleDevs: prev.visibleDevs + 6 }));
+  }
+
+}
+
+
+export default Developers;

src/components/Developers/styles.js

@@ -0,0 +1,46 @@
+/**
+ * @prettier
+ */
+
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiFab } from '@material-ui/core/Fab';
+import colors from '../../utils/styles/colors';
+
+import { default as MuiCardContent } from '@material-ui/core/CardContent/index';
+
+export const Details = styled('span')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const Content = styled('div')`
+  margin: -5px;
+  display: flex;
+  flex-wrap: wrap;
+  > * {
+    margin: 5px;
+  }
+`;
+
+export const CardContent = styled(MuiCardContent)`
+  && {
+    padding-bottom: 20px;
+  }
+`;
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+    margin-bottom: 10px;
+    text-transform: capitalize;
+  }
+`;
+
+export const Fab = styled(MuiFab)`
+  && {
+    background-color: ${colors.primary};
+    color: ${colors.white};
+  }
+`;