fix: recover Stats component

Author: tristandubbeld

packages/components/src/components/Stats/index.tsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { Text } from '../Text';
+import { Stack } from '../Stack';
+import { Icon } from '../Icon';
 
 export const HeartIcon = props => (
   <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
@@ -37,3 +40,38 @@ export const formatNumber = (count: number): string | number => {
 
   return count;
 };
+
+export const Stats = ({ sandbox, ...props }) => (
+  <Stack gap={4} {...props}>
+    {typeof sandbox.likeCount !== 'undefined' && (
+      <Stack gap={2} align="center">
+        <Text variant="muted" style={{ display: 'flex', alignItems: 'center' }}>
+          <Icon name="heart" size={13} />
+        </Text>
+        <Text size={3} variant="muted">
+          {formatNumber(sandbox.likeCount)}
+        </Text>
+      </Stack>
+    )}
+    {typeof sandbox.viewCount !== 'undefined' && (
+      <Stack gap={2} align="center">
+        <Text variant="muted" style={{ display: 'flex', alignItems: 'center' }}>
+          <Icon name="eye" size={16} />
+        </Text>
+        <Text size={3} variant="muted">
+          {formatNumber(sandbox.viewCount)}
+        </Text>
+      </Stack>
+    )}
+    {typeof sandbox.forkCount !== 'undefined' && (
+      <Stack gap={2} align="center">
+        <Text variant="muted" style={{ display: 'flex', alignItems: 'center' }}>
+          <Icon name="forkFilled" size={14} />
+        </Text>
+        <Text size={3} variant="muted">
+          {formatNumber(sandbox.forkCount)}
+        </Text>
+      </Stack>
+    )}
+  </Stack>
+);