Merge pull request #90 from ctc-uci/85-archived-events-page-match-hi-…

…fi-design 85 archived events page match hi fi design
ctc-uci · Feb 23, 2024 · c01be0d · c01be0d
2 parents cb9b94e + 986cebe
commit c01be0d
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 24 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/src/pages/ArchivedEvents.jsx b/src/pages/ArchivedEvents.jsx
@@ -1,8 +1,34 @@
-import { Heading, Grid, Center, GridItem } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Center,
+  Divider,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Flex,
+  Heading,
+  Stack,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Text,
+  TableContainer,
+} from '@chakra-ui/react';
+import { SearchIcon } from '@chakra-ui/icons';
+import {
+  FaArrowUp,
+  FaArrowDown,
+  FaMapMarkerAlt,
+  FaRegCalendar,
+  FaUser,
+} from 'react-icons/fa';
 import Backend from '../utils/utils';
 import { useEffect, useState } from 'react';
-import EventCard from '../components/DummyEvents/EventCard';
-
 const ArchivedEvents = () => {
   const [events, setEvents] = useState([]);
   const getEvents = async () => {
@@ -14,32 +40,174 @@ const ArchivedEvents = () => {
     }
   };
 
+  const eventRows = events.map(event => (
+    <>
+      {console.log(event)}
+      <Tr key={event.id}>
+        <Td>
+          <Flex>
+            <Image borderRadius="full" boxSize="50px" src={event.image_url} alt="image"></Image>{' '}
+            <Center marginLeft={3} fontWeight={'500'}>
+              <Text fontWeight={'500'} fontSize={'lg'}>
+                {event.name}
+              </Text>
+            </Center>
+          </Flex>
+        </Td>
+        <Td>
+          <Text fontWeight={'400'} fontSize={'lg'}>
+            {event.location}
+          </Text>
+        </Td>
+
+        <Td>
+          <Text fontWeight={'400'} fontSize={'lg'}>
+            {event.date.substring(5, 7)}/{event.date.substring(8, 10)}/{event.date.substring(0, 4)}
+          </Text>
+        </Td>
+        <Td>
+          <Button
+            borderRadius={20}
+            backgroundColor={'#30548c'}
+            color={'white'}
+            // width={20}
+            // height={10}
+            px={3}
+            fontSize={'sm'}
+          >
+            View Details
+          </Button>
+        </Td>
+      </Tr>
+    </>
+  ));
+
   useEffect(() => {
     getEvents();
   }, []);
 
-  const eventCards = (
-    <Grid templateColumns="repeat(3, 1fr)" gap={6}>
-      {events.map(element => (
-        <GridItem key={element.id}>
-          <EventCard
-            {...element}
-            // isSelected={selectedEvents.includes(element.id)}
-            // showSelect={showSelect}
-            // handleCheckboxChange={handleCheckboxChange}
+  return (
+    <Box style={{ display: 'grid', gap: '22px' }} backgroundColor={'#c8e6fe'}>
+      {/* Overall Imapct Card */}
+      <Heading marginLeft={10} marginTop={5}>
+        Overall Impact
+      </Heading>
+      <Flex
+        justifyContent={'space-around'}
+        backgroundColor={'white'}
+        marginLeft={10}
+        marginRight={10}
+        borderRadius={10}
+        paddingTop={10}
+        paddingBottom={10}
+      >
+        <Box display="flex" justifyContent="center" alignItems="center">
+          Column 1
+        </Box>
+        <Divider orientation="vertical" />
+        <Box display="flex" justifyContent="center" alignItems="center">
+          Column 2
+        </Box>
+        <Divider orientation="vertical" />
+        <Box display="flex" justifyContent="center" alignItems="center">
+          Column 3
+        </Box>
+      </Flex>
+
+      {/* Past Events Search Bar */}
+      <Heading marginLeft={10} marginTop={5}>
+        Past Events
+      </Heading>
+      <Stack spacing={4} direction={'row'}>
+        <InputGroup marginLeft={10} borderRadius={5} width={'700px'}>
+          <InputLeftElement pointerEvents="none">
+            <SearchIcon color="gray.400" />
+          </InputLeftElement>
+          <Input
+            size={'lg'}
+            type="event"
+            backgroundColor={'white'}
+            placeholder="Search Event Name (e.g. Festival of Whales)"
+            marginBottom={0}
           />
-        </GridItem>
-      ))}
-    </Grid>
-  );
+        </InputGroup>
 
-  return (
-    <>
-      <Center>
-        <Heading marginBottom={10}> ARCHIVED EVENT</Heading>
-      </Center>
-      {eventCards}
-    </>
+        <InputGroup borderRadius={5} width={'350px'}>
+          <InputLeftElement pointerEvents="none">
+            <SearchIcon color="gray.400" />
+          </InputLeftElement>
+          <Input
+            backgroundColor={'white'}
+            size={'lg'}
+            type="location"
+            placeholder="Search Location"
+          />
+        </InputGroup>
+
+        <InputGroup borderRadius={5} width={'250px'}>
+          <Input backgroundColor={'white'} size={'lg'} type="day" placeholder="Search Date" />
+        </InputGroup>
+
+        <Box
+          backgroundColor={'#30548c'}
+          width={'50px'}
+          height={'50px'}
+          borderRadius={10}
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <SearchIcon size="lg" color={'white'}></SearchIcon>
+        </Box>
+      </Stack>
+
+      {/* Events Display */}
+      <TableContainer
+        borderRadius={10}
+        style={{ alignContent: 'center', display: 'flex', justifyContent: 'center' }}
+      >
+        <Table
+          backgroundColor={'white'}
+          border="2px solid #F7FAFC"
+          borderRadius={10}
+          marginLeft={10}
+          marginRight={10}
+          marginBottom={10}
+        >
+          <Thead style={{ backgroundColor: '#F7FAFC' }}>
+            {/* headings */}
+            <Tr>
+              <Th>
+                <Flex>
+                  <FaUser />
+                  <Box marginLeft={2}>Event name</Box>
+                </Flex>
+              </Th>
+              <Th>
+                <Flex>
+                  <FaMapMarkerAlt />
+                  <Box marginLeft={2} marginRight={2}>
+                    Location
+                  </Box>
+                  <FaArrowDown />
+                </Flex>
+              </Th>
+              <Th>
+                <Flex>
+                  <FaRegCalendar />
+                  <Box marginLeft={2} marginRight={2}>
+                    Event date
+                  </Box>
+                  <FaArrowUp />
+                </Flex>
+              </Th>
+              <Th></Th>
+            </Tr>
+          </Thead>
+          <Tbody>{eventRows}</Tbody>
+        </Table>
+      </TableContainer>
+    </Box>
   );
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -4972,4 +4972,4 @@ yup@^1.3.3:
     property-expr "^2.0.5"
     tiny-case "^1.0.3"
     toposort "^2.0.2"
-    type-fest "^2.19.0"
+    type-fest "^2.19.0"