From 348c0e954b920de08833fc8d84751321651d089e Mon Sep 17 00:00:00 2001
From: Koushith <koushith97@gmail.com>
Date: Tue, 21 Dec 2021 10:38:50 +0530
Subject: [PATCH] #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             |  2 ++
 .../stats-card/stats-card.component.props.ts  | 19 +++++++++++++++++++
 .../stats-card/stats-card.component.styles.ts | 19 +++++++++++++++++++
 .../stats-card/stats-card.component.tsx       | 17 +++++++++++++++++
 4 files changed, 57 insertions(+)
 create mode 100644 src/components/primitive/stats-card/stats-card.component.props.ts
 create mode 100644 src/components/primitive/stats-card/stats-card.component.styles.ts
 create mode 100644 src/components/primitive/stats-card/stats-card.component.tsx

diff --git a/src/components/primitive/index.ts b/src/components/primitive/index.ts
index 6122305..5734cb9 100644
--- a/src/components/primitive/index.ts
+++ b/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';
diff --git a/src/components/primitive/stats-card/stats-card.component.props.ts b/src/components/primitive/stats-card/stats-card.component.props.ts
new file mode 100644
index 0000000..d38438a
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/primitive/stats-card/stats-card.component.styles.ts b/src/components/primitive/stats-card/stats-card.component.styles.ts
new file mode 100644
index 0000000..872d39e
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/primitive/stats-card/stats-card.component.tsx b/src/components/primitive/stats-card/stats-card.component.tsx
new file mode 100644
index 0000000..beded61
--- /dev/null
+++ b/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>
+  );
+};