DRY up the statistics

Ives van Hoorne · Ives van Hoorne · commit bff356ff8b81 · 2017-06-26T22:02:35.000+02:00
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Project/Statistics.js b/src/app/pages/Sandbox/Editor/Workspace/Project/Statistics.js
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Project/Statistics/StatCount.js b/src/app/pages/Sandbox/Editor/Workspace/Project/Statistics/StatCount.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Count = styled.span`
+  color: white;
+  font-weight: 500;
+`;
+
+const CountDescription = styled.span`
+  color: rgba(255, 255, 255, 0.6);
+`;
+
+type Props = {
+  className: string,
+  count: number,
+  singular: string,
+  plural: string,
+};
+
+export default ({ className, count, singular, plural }: Props) =>
+  <div className={className}>
+    <Count>{`${count} `}</Count>
+    <CountDescription>
+      {` ${count === 1 ? singular : plural}`}
+    </CountDescription>
+  </div>;
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Project/Statistics/index.js b/src/app/pages/Sandbox/Editor/Workspace/Project/Statistics/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import WorkspaceSubtitle from '../../WorkspaceSubtitle';
+
+import StatCount from './StatCount';
+
+type Props = {
+  likeCount: number,
+  forkCount: number,
+  viewCount: number,
+};
+
+const StyledStatCount = styled(StatCount)`
+  margin: .5rem 1rem;
+  font-size: .875rem;
+`;
+
+export default ({ likeCount, forkCount, viewCount }: Props) =>
+  <div>
+    <WorkspaceSubtitle>Statistics</WorkspaceSubtitle>
+    <StyledStatCount count={likeCount} singular="like" plural="likes" />
+    <StyledStatCount count={forkCount} singular="fork" plural="forks" />
+    <StyledStatCount count={viewCount} singular="view" plural="views" />
+  </div>;
