Clear the Empty spaces in /chapter route

client/.env.development.local

@@ -0,0 +1 @@
+NEXT_PUBLIC_SERVER_URL=https://5000-hisnameispum-chapter-r4fb8q8psgg.ws-us61.gitpod.io

client/.env.local

@@ -0,0 +1,8 @@
+# CODESEE=true
+NEXT_PUBLIC_USE_AUTH0=false
+NEXT_PUBLIC_AUTH0_DOMAIN=YOUR-AUTH0-DOMAIN
+NEXT_PUBLIC_AUTH0_CLIENT_ID=YOUR-AUTH0-APP-CLIENT-ID
+NEXT_PUBLIC_AUTH0_AUDIENCE=YOUR-AUTH0-APP-AUDIENCE
+NEXT_PUBLIC_SERVER_URL=http://localhost:5000
+NEXT_PUBLIC_CLIENT_URL=http://localhost:3000
+NEXT_PUBLIC_ENVIRONMENT=development

client/src/modules/chapters/pages/chaptersPage.tsx

@@ -1,8 +1,18 @@
-import { Heading, VStack, Stack } from '@chakra-ui/layout';
+import { Heading, VStack, Stack, Flex, Text } from '@chakra-ui/layout';
 import { NextPage } from 'next';
 import React from 'react';
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Grid,
+  GridItem,
+} from '@chakra-ui/react';
 
-import { ChapterCard } from 'components/ChapterCard';
 import { useChaptersQuery } from 'generated/graphql';
 
 export const ChaptersPage: NextPage = () => {
@@ -20,16 +30,61 @@ export const ChaptersPage: NextPage = () => {
       </div>
     );
   }
-
   return (
     <VStack>
-      <Stack w={['90%', '90%', '60%']} maxW="600px" spacing={3} mt={10} mb={5}>
-        <Heading>Chapters: </Heading>
-        {data.chapters.map((chapter) => (
-          <Heading size="md" key={chapter.id}>
-            <ChapterCard key={chapter.id} chapter={chapter} />
-          </Heading>
-        ))}
+      <Stack w="40%" mt={10} mb={5}>
+        <Flex justify="start">
+          <Heading>Chapters: </Heading>
+        </Flex>
+        <Flex direction="column">
+          <Text fontSize="2xl">
+            {' '}
+            Chapters allow you to organize events based on your preferences.
+          </Text>
+          <Grid mt="5%" templateColumns="repeat(2, 1fr)" columnGap="5%">
+            <GridItem>
+              <TableContainer>
+                <Table colorScheme="facebook" borderRadius="md" borderWidth={2}>
+                  <Thead>
+                    <Tr bg="blue.200">
+                      <Th borderWidth={2}>Chapter</Th>
+                      <Th borderWidth={2}>Description</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {data.chapters.map((chapter) => (
+                      <Tr key={chapter.id}>
+                        <Td borderWidth={2}>{chapter.name}</Td>
+                        <Td borderWidth={2}>{chapter.description}</Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+              </TableContainer>
+            </GridItem>
+
+            <GridItem>
+              <TableContainer>
+                <Table colorScheme="facebook" borderRadius="md" borderWidth={2}>
+                  <Thead>
+                    <Tr bg="blue.200">
+                      <Th borderWidth={2}>Chapter</Th>
+                      <Th borderWidth={2}>Description</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {data.chapters.map((chapter) => (
+                      <Tr key={chapter.id}>
+                        <Td borderWidth={2}>{chapter.name}</Td>
+                        <Td borderWidth={2}>{chapter.description}</Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+              </TableContainer>
+            </GridItem>
+          </Grid>
+        </Flex>
       </Stack>
     </VStack>
   );