Created stats list

src/app/StatsList.tsx

@@ -0,0 +1,62 @@
+import { Fragment, JSX } from "react";
+import { Heading, Flex } from "@chakra-ui/react";
+import { CombinedError } from "urql";
+import SingleStatComponent from "@/components/stats/SingleStat";
+
+interface StatsListProps {
+  title: string;
+  loading: boolean;
+  error: CombinedError | undefined;
+  groups?: number;
+  links: number;
+  commands: number;
+  triggers: number;
+}
+
+const StatsList = ({
+  title,
+  loading,
+  error,
+  groups,
+  commands,
+  links,
+  triggers
+}: StatsListProps): JSX.Element => {
+  return (
+    <Fragment>
+      <Heading as="h1" fontSize="3xl">
+        {title}
+      </Heading>
+      <Flex w="80%" flexDirection={{ base: "column", md: "row" }} gap={4}>
+        {groups ? (
+          <SingleStatComponent
+            loading={loading}
+            title="Groups Bot Helped"
+            error={error}
+            stat={groups}
+          />
+        ) : null}
+        <SingleStatComponent
+          loading={loading}
+          title="Links Deleted"
+          error={error}
+          stat={links}
+        />
+        <SingleStatComponent
+          loading={loading}
+          title="Commands Responded To"
+          error={error}
+          stat={commands}
+        />
+        <SingleStatComponent
+          loading={loading}
+          title="Times Triggered"
+          error={error}
+          stat={triggers}
+        />
+      </Flex>
+    </Fragment>
+  );
+};
+
+export default StatsList;