Merge pull request #13966 from ethereum/migrateEventCard

Migrate EventCard to Shadcn

Author: pettinarip

src/components/EventCard.tsx

@@ -2,24 +2,19 @@ import React from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { BsCalendar3 } from "react-icons/bs"
-import { Box, Flex, Heading, Icon } from "@chakra-ui/react"
 
 import type { EventCardProps } from "@/lib/types"
 
-import { ButtonLink } from "./Buttons"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
+
+import { cn } from "@/lib/utils/cn"
+
 import { TwImage } from "./Image"
-import Text from "./OldText"
 
 import EventFallback from "@/public/images/events/event-placeholder.png"
 
-const clearStyles = {
-  content: '""',
-  display: "block",
-  width: "100%",
-  clear: "both",
-}
-
-const EventCard = ({
+const EventCard: React.FC<EventCardProps> = ({
   title,
   href,
   description,
@@ -28,97 +23,50 @@ const EventCard = ({
   imageUrl,
   endDate,
   startDate,
-}: EventCardProps) => {
+}) => {
   const { locale } = useRouter()
   const { t } = useTranslation("page-community")
+
   const formatedDate = new Intl.DateTimeFormat(locale, {
     day: "2-digit",
     month: "short",
   }).formatRange(
-    // .replace(/-/g, "/") ==> Fixes Safari Invalid date
     new Date(startDate?.replace(/-/g, "/")),
     new Date(endDate?.replace(/-/g, "/"))
   )
 
   return (
-    <Box
-      className={className}
-      position="relative"
-      mt="0"
-      _before={clearStyles}
-      _after={clearStyles}
-      w="full"
-      h="full"
-    >
-      <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;"
-          >
-            {imageUrl ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={imageUrl}
-                alt={title}
-                className="max-h-[224px] w-full object-cover xl:h-[124px]"
-              />
-            ) : (
-              <TwImage src={EventFallback} alt="" />
-            )}
-          </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>
+    <Card className={cn("flex h-full flex-col rounded-md border", className)}>
+      <CardHeader className="flex flex-row items-center justify-center rounded-t-md border-b border-primary bg-[#FCFCFC] p-2 dark:bg-[#272627]">
+        <BsCalendar3 className="mr-2 h-6 w-6 text-primary" />
+        <span className="!mt-0 text-right text-sm text-primary">
+          {formatedDate}
+        </span>
+      </CardHeader>
+      <div className="flex items-center justify-center">
+        {imageUrl ? (
+          <img
+            src={imageUrl}
+            alt={title}
+            className="max-h-[224px] w-full object-cover xl:h-[124px]"
+          />
+        ) : (
+          <TwImage src={EventFallback} alt="" />
+        )}
+      </div>
+      <CardContent className="flex-grow p-4">
+        <div className="text-center">
+          <h3 className="text-xl font-bold md:text-2xl">{title}</h3>
+          <span className="text-sm opacity-60">{location}</span>
+        </div>
+        <p className="md:text-sm md:leading-[1.6rem]">{description}</p>
+      </CardContent>
+      <CardFooter className="p-4 pt-0">
+        <ButtonLink href={href} variant="outline" className="w-full text-sm">
+          {t("page-community-upcoming-events-view-event")}
+        </ButtonLink>
+      </CardFooter>
+    </Card>
   )
 }