feat: migrate MeetupList to tailwind

Author: saurabhburade

src/components/MeetupList.tsx

@@ -1,29 +1,21 @@
 import { useState } from "react"
 import sortBy from "lodash/sortBy"
 import { FaChevronRight } from "react-icons/fa6"
-import {
-  Box,
-  Flex,
-  Icon,
-  LinkBox,
-  LinkOverlay,
-  List,
-  ListItem,
-  useToken,
-  VisuallyHidden,
-} from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
 import InfoBanner from "@/components/InfoBanner"
-import Input from "@/components/Input"
-import InlineLink, { BaseLink } from "@/components/Link"
-import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import meetups from "@/data/community-meetups.json"
 
+import Input from "../../tailwind/ui/Input"
+
+import { Flex } from "./ui/flex"
+import InlineLink, { BaseLink } from "./ui/Link"
+
 export interface Meetup {
   title: string
   emoji: string
@@ -59,89 +51,59 @@ const MeetupList = () => {
     })
   }
 
-  const primaryBaseColor = useToken("colors", "primary.base")
-
   return (
-    <Box>
+    <div>
       <Input
-        mb={6}
+        className="mb-6 w-full"
         onChange={handleSearch}
         placeholder={"Search by meetup title or location"}
         aria-describedby="input-instruction"
       />
       {/* hidden for attachment to input only */}
-      <VisuallyHidden hidden id="input-instruction">
+      <span id="input-instruction" className="sr-only">
         results update as you type
-      </VisuallyHidden>
-
-      <List
-        m={0}
-        border={"2px solid"}
-        borderColor={"offBackground"}
+      </span>
+      <ul
+        className="m-0 border-2 border-off-background"
         aria-label="Event meetup results"
       >
         {filteredMeetups.map((meetup, idx) => (
-          <LinkBox
-            as={ListItem}
+          <BaseLink
+            href={meetup.link}
+            hideArrow
+            // TODO: create custom class text-decoration-none
+            className={cn(
+              "group mb-[0.25px] flex w-full justify-between p-4 text-current no-underline",
+              "hover:rounded hover:bg-table-background-hover hover:text-current hover:no-underline hover:shadow-[0_0_1px] hover:shadow-primary",
+              "border-b-2 border-off-background"
+            )}
             key={idx}
-            display="flex"
-            justifyContent="space-between"
-            mb={0.25}
-            p={4}
-            w="100%"
-            _hover={{
-              textDecoration: "none",
-              borderRadius: "base",
-              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">
-                {idx + 1}
-              </Box>
-              <Box>
-                <LinkOverlay
-                  as={BaseLink}
-                  href={meetup.link}
-                  textDecor="none"
-                  color="text"
-                  hideArrow
-                  isExternal
+            <Flex className="me-4 flex-[1_1_75%]">
+              <div className="me-4 opacity-40">{idx + 1}</div>
+              <div>
+                <p
+                  // TODO: create custom class text-decoration-none
+                  className="no-underline group-hover:text-primary-hover group-hover:underline"
                 >
                   {meetup.title}
-                </LinkOverlay>
-              </Box>
+                </p>
+              </div>
             </Flex>
-            <Flex
-              textAlign="end"
-              alignContent="flex-start"
-              flex="1 1 25%"
-              me={4}
-              flexWrap="wrap"
-            >
+            <Flex className="me-4 flex-[1_1_25%] flex-wrap content-start items-center text-end">
               <Emoji
                 text={meetup.emoji}
                 className="me-2 text-md leading-none"
               />
-              <Text mb={0} opacity={"0.6"}>
-                {meetup.location}
-              </Text>
+              <p className="mb-0 opacity-60">{meetup.location}</p>
             </Flex>
-            <Flex alignItems={"center"}>
-              <Icon
-                as={FaChevronRight}
-                width={{ base: "14px", xl: "18px" }}
-                height={{ base: "14px", xl: "18px" }}
-                color={"text"}
-              />
+            <Flex className="items-center">
+              <FaChevronRight className="h-[14px] w-[14px] xl:h-[18px] xl:w-[18px]" />
             </Flex>
-          </LinkBox>
+          </BaseLink>
         ))}
-      </List>
-      <Box aria-live="assertive" aria-atomic>
+      </ul>
+      <div aria-live="assertive" aria-atomic>
         {!filteredMeetups.length && (
           <InfoBanner emoji=":information_source:">
             <Translation id="page-community:page-community-meetuplist-no-meetups" />{" "}
@@ -150,8 +112,8 @@ const MeetupList = () => {
             </InlineLink>
           </InfoBanner>
         )}
-      </Box>
-    </Box>
+      </div>
+    </div>
   )
 }
 

src/styles/global.css

@@ -49,6 +49,8 @@
       rgba(145, 234, 228, 0.2) 100%
     );
     --search-background: var(--background);
+    --off-background: #f7f7f7;
+    --table-background-hover: #f2f2f2;
   }
 
   .dark {
@@ -83,6 +85,8 @@
       rgba(134, 253, 232, 0.08) 100%
     );
     --search-background: #4c4c4c;
+    --off-background: #181818;
+    --table-background-hover: rgba(255,115,36,.013);
   }
 }
 

tailwind.config.ts

@@ -217,6 +217,8 @@ const config = {
             "active-background": "hsla(var(--menu-4-active-background))",
           },
         },
+        "off-background": "var(--off-background)",
+        "table-background-hover": "var(--table-background-hover)",
       },
 
       /** @deprecated */