added command list to site

src/app/CommandsListTable.tsx

@@ -0,0 +1,57 @@
+import { JSX } from "react";
+import { Checkmark, Heading, Table, VStack } from "@chakra-ui/react";
+import botCommands from "@/data/botCommands";
+
+const CommandsListTable = (): JSX.Element => {
+  return (
+    <VStack gap={6} w={{ base: "90%", md: "100%" }}>
+      <Heading as="h3" fontSize="3xl">
+        {"Bot Commands"}
+      </Heading>
+      <Table.Root maxW="fit-content" interactive showColumnBorder>
+        <Table.Caption>
+          {"The bot will only respond to admins and moderators within groups."}
+        </Table.Caption>
+        <Table.Header>
+          <Table.Row bg="cyan.emphasized">
+            <Table.ColumnHeader> {"Command"}</Table.ColumnHeader>
+            <Table.ColumnHeader> {"Description"}</Table.ColumnHeader>
+            <Table.ColumnHeader> {"Private"}</Table.ColumnHeader>
+            <Table.ColumnHeader> {"Group"}</Table.ColumnHeader>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {botCommands.map((commandObj, index) => {
+            const { command, description, groups } = commandObj;
+            return (
+              <Table.Row
+                key={`${index}-${command}`}
+                bg="cyan.muted"
+                _hover={{ bg: "purple.emphasized" }}
+              >
+                <Table.Cell>{command}</Table.Cell>
+                <Table.Cell>{description.replaceAll("\\", "")}</Table.Cell>
+                <Table.Cell>
+                  {groups ? (
+                    <Checkmark colorPalette="purple" checked />
+                  ) : (
+                    <Checkmark colorPalette="purple" indeterminate />
+                  )}
+                </Table.Cell>
+                <Table.Cell>
+                  {commandObj.private ? (
+                    <Checkmark colorPalette="purple" checked />
+                  ) : (
+                    <Checkmark colorPalette="purple" indeterminate />
+                  )}
+                </Table.Cell>
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+      </Table.Root>
+    </VStack>
+  );
+};
+
+export default CommandsListTable;

src/app/page.tsx

@@ -23,6 +23,7 @@ import GetTotalGroupsQuery from "@/graphql/queries/getTotalGroups";
 import GetTotalStatsQuery from "@/graphql/queries/getTotalStats";
 import GetTodaysStatsQuery from "@/graphql/queries/getTodaysStats";
 import GetStatsRange from "@/graphql/queries/getStatsRange";
+import CommandsListTable from "./CommandsListTable";
 
 export default function Home() {
   // * Total Groups * //
@@ -152,6 +153,7 @@ export default function Home() {
               </Text>
             </VStack>
           </VStack>
+          <CommandsListTable />
           <VStack gap={10} w="100%">
             {totalGroups ? (
               <StatsList
@@ -266,7 +268,9 @@ export default function Home() {
             maxW={{ base: "", sm: "62dvw" }}
             px={2}
           >
-            {"Down with fascism! Fuck MAGA! Fuck Trump! Fuck Nazis!"}
+            {
+              "Down with fascism! Fuck MAGA! Fuck Trump! Fuck Nazis! Abolish ICE!"
+            }
           </Text>
           <Text
             fontSize="3xl"