Feat: redesign events page ✨

src/components/EventCard.tsx

@@ -1,8 +1,11 @@
 import React from "react"
-import { Box, Heading } from "@chakra-ui/react"
+import { useRouter } from "next/router"
+import { useTranslation } from "react-i18next"
+import { BsCalendar3 } from "react-icons/bs"
+import { Box, Flex, Heading, Icon } from "@chakra-ui/react"
+import { Image } from "@chakra-ui/react"
 
 import { ButtonLink } from "./Buttons"
-import Emoji from "./Emoji"
 import Text from "./OldText"
 
 const clearStyles = {
@@ -16,87 +19,109 @@ export type EventCardProps = {
   title: string
   href: string
   date: string
+  startDate: string
+  endDate: string
   description: string
   className?: string
   location: string
-  isEven: boolean
+  imageUrl?: string
 }
 
 const EventCard = ({
   title,
   href,
-  date,
   description,
   className,
   location,
-  isEven,
-}: EventCardProps) => (
-  <Box
-    className={className}
-    position="relative"
-    marginTop={{ base: "30px", md: 0 }}
-    _before={clearStyles}
-    _after={clearStyles}
-  >
-    <Box
-      w="24px"
-      h="24px"
-      position="absolute"
-      top="0"
-      insetInlineStart="50%"
-      overflow="hidden"
-      ms="-12px"
-      backgroundColor="primary.base"
-      display={{ base: "none", md: "block" }}
-    />
+  imageUrl,
+  endDate,
+  startDate,
+}: EventCardProps) => {
+  const { locale } = useRouter()
+  const { t } = useTranslation("page-community")
+  const formatedDate = new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    month: "short",
+  }).formatRange(new Date(startDate), new Date(endDate))
+
+  return (
     <Box
-      width={{ base: "100%", md: "45%" }}
-      padding={6}
-      backgroundColor="ednBackground"
-      borderRadius="sm"
-      border="1px solid"
-      borderColor="lightBorder"
-      float={isEven ? "inline-end" : { base: "inline-end", md: "none" }}
-      marginTop={isEven ? { base: 0, md: "-25%" } : 0}
-      _before={{
-        content: '""',
-        position: "absolute",
-        top: "10px",
-        width: 0,
-        height: "3px",
-        display: { base: "none", md: "inline" },
-        ...(isEven
-          ? {
-              insetInlineStart: "inherit",
-              insetInlineEnd: "45%",
-              borderInlineStart: 0,
-              borderInlineEnd: "25px solid",
-            }
-          : {
-              insetInlineStart: "45%",
-              borderInlineStart: "25px solid",
-              borderInlineEnd: 0,
-            }),
-        borderColor: "primary.base",
-      }}
+      className={className}
+      position="relative"
+      mt="0"
+      _before={clearStyles}
+      _after={clearStyles}
+      w="full"
+      h="full"
     >
-      <Text color="primary.base" marginBottom={0} textAlign="end">
-        {date}
-        <Emoji text=":spiral_calendar:" fontSize="md" ms={2} />
-      </Text>
-      <Text marginBottom={0} textAlign="end">
-        <Text as="span" opacity={0.6}>
-          {location}
-        </Text>
-        <Emoji text=":round_pushpin:" fontSize="md" ms={2} />
-      </Text>
-      <Heading as="h3" marginTop={0} fontWeight="semibold" lineHeight={1.4}>
-        {title}
-      </Heading>
-      <Text>{description}</Text>
-      <ButtonLink href={href}>View Event</ButtonLink>
+      <Flex
+        border="1px solid"
+        borderColor="lightBorder"
+        height={"100%"}
+        direction={"column"}
+        justifyContent={"space-between"}
+        rounded="base"
+      >
+        <Box>
+          <Flex
+            alignItems={"center"}
+            justifyContent={"center"}
+            background={"grayBackground"}
+            padding={2}
+            gap={2}
+            borderBottom="1px solid"
+            borderColor="primary.base"
+            roundedTop={"4px"}
+          >
+            <Icon as={BsCalendar3} boxSize={6} color="primary.base" />
+
+            <Text color="primary.base" marginBottom={0} textAlign="end">
+              {formatedDate}
+            </Text>
+          </Flex>
+
+          {/* TODO : add image hostname to next config or add event image to public dir  */}
+          <Flex
+            alignItems="center"
+            justifyContent="center"
+            boxShadow="rgb(0 0 0 / 10%) 0px -1px 0px inset;"
+          >
+            <Image
+              src={imageUrl || "/images/events/event-placeholder.png"}
+              alt={title}
+              w="full"
+              height={{ base: "224px", xl: "124px" }}
+              objectFit={"cover"}
+              fallbackSrc="/images/events/event-placeholder.png"
+            />
+          </Flex>
+          <Box padding={4}>
+            <Box textAlign={"center"}>
+              <Heading
+                as="h3"
+                fontSize={{ base: "md", md: "2xl" }}
+                marginTop={0}
+                lineHeight={1.4}
+              >
+                {title}
+              </Heading>
+              <Text as="span" opacity={0.6}>
+                {location}
+              </Text>
+            </Box>
+            <Box>
+              <Text fontSize="sm">{description}</Text>
+            </Box>
+          </Box>
+        </Box>
+        <Box padding={4} paddingTop={0} width={"100%"}>
+          <ButtonLink href={href} width={"100%"} variant="outline">
+            {t("page-community-upcoming-events-view-event")}
+          </ButtonLink>
+        </Box>
+      </Flex>
     </Box>
-  </Box>
-)
+  )
+}
 
 export default EventCard

src/components/MeetupList.tsx

@@ -1,8 +1,10 @@
 import { useState } from "react"
 import sortBy from "lodash/sortBy"
+import { FaChevronRight } from "react-icons/fa6"
 import {
   Box,
   Flex,
+  Icon,
   LinkBox,
   LinkOverlay,
   List,
@@ -23,8 +25,6 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import meetups from "@/data/community-meetups.json"
 
-import { useRtlFlip } from "@/hooks/useRtlFlip"
-
 export interface Meetup {
   title: string
   emoji: string
@@ -49,13 +49,7 @@ const sortedMeetups: Array<Meetup> = sortBy(meetups, ["emoji", "location"])
 // TODO prop if ordered list or unordered
 const MeetupList = () => {
   const [searchField, setSearchField] = useState<string>("")
-  const { flipForRtl } = useRtlFlip()
   const filteredMeetups = filterMeetups(searchField)
-  const listBoxShadow = useColorModeValue("tableBox.light", "tableBox.dark")
-  const listItemBoxShadow = useColorModeValue(
-    "tableItemBox.light",
-    "tableItemBox.dark"
-  )
 
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchField(event.target.value)
@@ -81,14 +75,18 @@ const MeetupList = () => {
         results update as you type
       </VisuallyHidden>
 
-      <List m={0} boxShadow={listBoxShadow} aria-label="Event meetup results">
+      <List
+        m={0}
+        border={"2px solid"}
+        borderColor={"offBackground"}
+        aria-label="Event meetup results"
+      >
         {filteredMeetups.map((meetup, idx) => (
           <LinkBox
             as={ListItem}
             key={idx}
             display="flex"
             justifyContent="space-between"
-            boxShadow={listItemBoxShadow}
             mb={0.25}
             p={4}
             w="100%"
@@ -98,6 +96,8 @@ const MeetupList = () => {
               boxShadow: `0 0 1px ${primaryBaseColor}`,
               bg: "tableBackgroundHover",
             }}
+            borderBottom={"2px solid"}
+            borderColor={"offBackground"}
           >
             <Flex flex="1 1 75%" me={4}>
               <Box me={4} opacity="0.4">
@@ -133,16 +133,14 @@ const MeetupList = () => {
                 {meetup.location}
               </Text>
             </Flex>
-            <Box
-              as="span"
-              _after={{
-                content: '"↗"',
-                ms: 0.5,
-                me: 1.5,
-                transform: flipForRtl,
-                display: "inline-block",
-              }}
-            ></Box>
+            <Flex alignItems={"center"}>
+              <Icon
+                as={FaChevronRight}
+                width={{ base: "14px", xl: "18px" }}
+                height={{ base: "14px", xl: "18px" }}
+                color={"text"}
+              />
+            </Flex>
           </LinkBox>
         ))}
       </List>