Shadcn Migrate: InfoBanner.tsx

src/components/InfoBanner.tsx

@@ -1,16 +1,20 @@
 import type { ReactNode } from "react"
-import { Flex, type FlexProps, LightMode } from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
-import Text from "@/components/OldText"
 
-type InfoBannerProps = FlexProps & {
+import { cn } from "@/lib/utils/cn"
+
+import { Flex, VStack } from "./ui/flex"
+
+type InfoBannerProps = {
   children?: ReactNode
   emoji?: string
   isWarning?: boolean
   shouldCenter?: boolean
   shouldSpaceBetween?: boolean
   title?: string
+  id?: string
+  className?: string
 }
 
 const InfoBanner = ({
@@ -20,47 +24,45 @@ const InfoBanner = ({
   shouldCenter,
   shouldSpaceBetween,
   title,
+  className,
   ...props
 }: InfoBannerProps) => {
   const banner = (
-    <LightMode>
+    <VStack
+      className={cn(
+        "rounded-sm p-6 sm:flex-row",
+        shouldCenter ? "max-w-[55rem]" : "max-w-full",
+        isWarning
+          ? "bg-warning-light dark:text-body-inverse"
+          : "bg-primary-low-contrast",
+        className
+      )}
+      {...props}
+    >
+      {emoji && (
+        <Emoji
+          className="mb-2 me-0 flex-shrink-0 flex-grow-0 self-start text-4xl sm:mb-0 sm:me-6 sm:self-auto"
+          text={emoji}
+        />
+      )}
       <Flex
-        align="center"
-        p="6"
-        borderRadius="sm"
-        maxW={shouldCenter ? "55rem" : "100%"}
-        sx={{
-          ":not(button)": {
-            color: "black300 !important",
-          },
-        }}
-        bg={isWarning ? "warning" : "infoBanner"}
-        direction={{ base: "column", sm: "row" }}
-        {...props}
-      >
-        {emoji && (
-          <Emoji
-            className="mb-2 me-0 flex-shrink-0 flex-grow-0 self-start text-4xl sm:mb-0 sm:me-6 sm:self-auto"
-            text={emoji}
-          />
+        className={cn(
+          "block",
+          shouldSpaceBetween
+            ? "w-full items-center justify-between sm:flex"
+            : "w-auto sm:block"
         )}
-        <Flex
-          display={{ base: "block", sm: shouldSpaceBetween ? "flex" : "block" }}
-          align={shouldSpaceBetween ? "center" : "auto"}
-          w={shouldSpaceBetween ? "100%" : "auto"}
-          justify={shouldSpaceBetween ? "space-between" : "auto"}
-        >
-          {title && (
-            <Text fontSize="lg" fontWeight="bold">
-              {title}
-            </Text>
-          )}
-          {children}
-        </Flex>
+      >
+        {title && <p className="mb-6 text-lg font-bold">{title}</p>}
+        {children}
       </Flex>
-    </LightMode>
+    </VStack>
+  )
+  return shouldCenter ? (
+    <Flex className="justify-center">{banner}</Flex>
+  ) : (
+    banner
   )
-  return shouldCenter ? <Flex justify="center">{banner}</Flex> : banner
 }
 
 export default InfoBanner

src/pages/dapps.tsx

@@ -295,7 +295,7 @@ const StyledH3 = (props: ChildOnlyProp) => (
 )
 
 const StyledInfoBanner = (props: ComponentPropsWithRef<typeof InfoBanner>) => (
-  <InfoBanner w={{ lg: "50%" }} {...props} />
+  <InfoBanner className="lg:w-1/2" {...props} />
 )
 
 const Column = (props: ChildOnlyProp) => (

src/pages/gas.tsx

@@ -179,7 +179,7 @@ const GasPage = () => {
           w="full"
         >
           <Box flex="60%" w="full" me={{ base: "auto", lg: 2 }}>
-            <InfoBanner mb={8} title={t("page-gas-summary-title")}>
+            <InfoBanner className="mb-8" title={t("page-gas-summary-title")}>
               <UnorderedList>
                 <ListItem>{t("page-gas-summary-item-1")}</ListItem>
                 <ListItem>{t("page-gas-summary-item-2")}</ListItem>

src/pages/stablecoins.tsx

@@ -546,7 +546,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
                 <MdHelpOutline className="ms-2 fill-body" size={16} />
               </Tooltip>
             </H3>
-            <InfoBanner emoji="⚠️" isWarning mb="4">
+            <InfoBanner className="mb-4" emoji="⚠️" isWarning>
               {t("page-stablecoins-algorithmic-disclaimer")}
             </InfoBanner>
             <p className="mb-6">