feat: use Grid to display the events link buttons (#2391)

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
freeCodeCamp · Jun 8, 2023 · cbbfe82 · cbbfe82
1 parent c61cb81
commit cbbfe82
Showing 1 changed file with 24 additions and 31 deletions.
diff --git a/client/src/modules/dashboard/shared/components/EventList.tsx b/client/src/modules/dashboard/shared/components/EventList.tsx
@@ -1,55 +1,32 @@
-import {
-  Flex,
-  Grid,
-  Heading,
-  Tag,
-  Text,
-  Button,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-} from '@chakra-ui/react';
+import { Flex, Grid, Heading, Tag, Text } from '@chakra-ui/react';
 import React from 'react';
 
-import { LockIcon } from '@chakra-ui/icons';
+import { LinkButton } from 'chakra-next-link';
+import { CalendarIcon, LockIcon, SettingsIcon } from '@chakra-ui/icons';
 
 interface Event {
   canceled: boolean;
   id: number;
   invite_only: boolean;
   name: string;
 }
-
 interface Props {
   events: Event[];
   emptyText?: string;
   title: string;
 }
-
 export const EventList = ({ events, emptyText, title }: Props) => {
   return (
     <>
       <Heading as="h2" marginBlock="1em" fontSize="lg">
         {title}
       </Heading>
       {events.length > 0 ? (
-        <Grid gap="2em">
+        <Grid gap="4em">
           {events.map(({ canceled, id, invite_only, name }) => (
-            <Flex justifyContent="space-between" key={id}>
-              <Menu>
-                <MenuButton as={Button}>{name}</MenuButton>
-                <MenuList minWidth="200">
-                  <MenuItem as="a" href={`/dashboard/events/${id}`}>
-                    Event dashboard
-                  </MenuItem>
-                  <MenuItem as="a" href={`/events/${id}`}>
-                    Event page
-                  </MenuItem>
-                </MenuList>
-              </Menu>
-
-              <Flex marginTop="1" gap="1em">
+            <Grid gap="1rem" key={id} gridTemplateColumns="repeat(4, 1fr)">
+              <Flex marginTop="1" gap="3em" gridColumn="1 / -1">
+                <Text>{name}</Text>
                 {invite_only && (
                   <Tag
                     borderRadius="lg"
@@ -78,7 +55,23 @@ export const EventList = ({ events, emptyText, title }: Props) => {
                   </Tag>
                 )}
               </Flex>
-            </Flex>
+              <LinkButton
+                gridRow="2"
+                gridColumn={{ base: '1/ -1', md: '1/3', xl: '1/2' }}
+                href={`/dashboard/events/${id}`}
+              >
+                <Text srOnly>{name}</Text> Dashboard{' '}
+                <SettingsIcon marginInlineStart=".5em" />
+              </LinkButton>
+              <LinkButton
+                gridRow={{ base: '3', md: '2' }}
+                gridColumn={{ base: '1/ -1', md: '-3/ -1', xl: '2/3' }}
+                href={`/events/${id}`}
+              >
+                <Text srOnly>{name}</Text> Event Page{' '}
+                <CalendarIcon marginInlineStart=".5em" />
+              </LinkButton>
+            </Grid>
           ))}
         </Grid>
       ) : (