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;

src/components/stats/SingleStat.tsx

@@ -0,0 +1,44 @@
+import { JSX } from "react";
+import { Skeleton, Stat, FormatNumber } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { CombinedError } from "urql";
+
+interface SingleStatComponentProps {
+  stat: number;
+  title: string;
+  loading: boolean;
+  error: CombinedError | undefined;
+}
+
+const SingleStatComponent = ({
+  stat,
+  title,
+  loading,
+  error
+}: SingleStatComponentProps): JSX.Element => {
+  return (
+    <Stat.Root alignItems="center">
+      <Stat.Label>{title}</Stat.Label>
+      <Stat.ValueText>
+        <Skeleton loading={loading} w="auto" minW="2.5rem" textAlign="center">
+          {(error || stat === undefined) && !loading ? (
+            <Icon
+              color="yellow"
+              icon="solar:danger-triangle-broken"
+              width="24"
+              height="24"
+            />
+          ) : (
+            <FormatNumber
+              value={stat}
+              notation="compact"
+              compactDisplay="short"
+            />
+          )}
+        </Skeleton>
+      </Stat.ValueText>
+    </Stat.Root>
+  );
+};
+
+export default SingleStatComponent;