Merge pull request #14 from ubc-biztech/stats-table

Statistics - Numbers chart

src/components/Stats/StatsTable.tsx

@@ -0,0 +1,47 @@
+interface StatsTableProps {
+  title: string;
+  data: Object;
+}
+
+const StatsTable: React.FC<StatsTableProps> = ({ title, data }) => {
+  const renderData = (data: Object, marginValue: number = 0): JSX.Element[] => {
+    return Object.entries(data).map(([label, count]) => {
+      if (typeof count === "number" || typeof count === "string") {
+        return (
+          <>
+            <div
+              className="col-span-2"
+              style={{ marginLeft: `${marginValue}px` }}
+            >
+              {label}
+            </div>
+            <div className="col-span-1 text-right">{count}</div>
+          </>
+        );
+      } else {
+        return (
+          <>
+            <div
+              className="col-span-2"
+              style={{ marginLeft: `${marginValue}px` }}
+            >
+              {label}
+            </div>
+            {renderData(count, marginValue + 16)}
+          </>
+        );
+      }
+    });
+  };
+  return (
+    <div className="bg-dark-slate p-8 w-1/3 rounded-md">
+      <h5 className="text-white">{title}</h5>
+      <br />
+      <div className="grid grid-cols-3 gap-2 text-pale-blue">
+        {renderData(data)}
+      </div>
+    </div>
+  );
+};
+
+export default StatsTable;

tailwind.config.ts

@@ -46,6 +46,8 @@ const config: Config = {
       'biztech-green': '#7AD040',
       'dark-navy': '#0C1221',
       'desat-navy': '#A2A7B3',
+      'dark-slate': "#324269",
+      'pale-blue': "#C4D5FF",
       'baby-blue': '#B2C9FC',
       'light-blue': '#E0E9FE',
       'white-blue': '#F7FAFF',