init

src/app/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import GetTotalGroupsQuery from "@/graphql/queries/getTotalGroups";
+import { Heading, Skeleton, Text } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { useQuery } from "@urql/next";
+import { Fragment } from "react/jsx-runtime";
+
+
+export default function Home() {
+  const [{ fetching, data, error }] = useQuery({ query: GetTotalGroupsQuery });
+
+  return (
+    <Fragment>
+      <Heading>{`Total number of groups the bot has helped`}</Heading>
+      <Skeleton loading={fetching} width="2rem">
+        <Text fontSize="2xl">
+          {error || !data || !data.getTotalGroups ? (
+            <Icon
+              color="yellow"
+              icon="solar:danger-triangle-broken"
+              width="24"
+              height="24"
+            />
+          ) : (
+            `${data.getTotalGroups}`
+          )}
+        </Text>
+      </Skeleton>
+    </Fragment>
+  );
+}