#86 - Create a reusable StatsCard (#87)

* adds reusable stats card

* refactors the code

* adds missing exports in index.ts file

src/components/primitive/index.ts

@@ -34,6 +34,8 @@ export * from './loader/loader.component';
 
 export * from './create-card/create-card.component';
 
+export * from './stats-card/stats-card.component';
+
 export * from './badge/badge.component';
 
 export * from 'react-grid-system';

src/components/primitive/stats-card/stats-card.component.props.ts

@@ -0,0 +1,19 @@
+import { TextComponentProps } from './../text/text.component.props';
+import { AvatarComponentProps } from './../avatar/avatar.component.props';
+
+export interface StatsComponentProps {
+  /**
+   * Name of the Icon.
+   */
+  iconName: AvatarComponentProps;
+
+  /**
+   * Headline for Stats Card.
+   */
+  heading: TextComponentProps;
+
+  /**
+   * Count for Stats Card.
+   */
+  count?: TextComponentProps;
+}

src/components/primitive/stats-card/stats-card.component.styles.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+/**
+ * Styles for Stats Container.
+ */
+export const StatsContainer = styled.div`
+  display: flex;
+  gap: 1.6rem;
+  width: fit-content;
+`;
+
+/**
+ * Styles for CountContainer.
+ */
+export const CountContainer = styled.span`
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;

src/components/primitive/stats-card/stats-card.component.tsx

@@ -0,0 +1,17 @@
+import { Avatar, Text } from 'components/primitive';
+import { StatsComponentProps } from './stats-card.component.props';
+import { StatsContainer, CountContainer } from './stats-card.component.styles';
+
+export const StatsCard: React.FC<StatsComponentProps> = (props) => {
+  const { heading, count, iconName } = props;
+
+  return (
+    <StatsContainer>
+      <Avatar size='large' flat {...iconName} />
+      <CountContainer>
+        <Text variant='small' color='textLight' {...heading} />
+        <Text variant='contentHeader' {...count} />
+      </CountContainer>
+    </StatsContainer>
+  );
+};