feat: migrate BannerNotification to tw

including `DismissableBnner`

Author: wackerow

src/components/Banners/BannerNotification.tsx

@@ -1,40 +1,20 @@
-import React from "react"
-import { Center, FlexProps, useMediaQuery } from "@chakra-ui/react"
-
-import { lightTheme as oldTheme } from "../../theme"
-
-export type BannerNotificationProps = FlexProps & {
+export type BannerNotificationProps = React.HTMLAttributes<HTMLDivElement> & {
   shouldShow?: boolean
 }
 
 const BannerNotification = ({
   children,
-  shouldShow = false,
+  shouldShow,
   ...props
 }: BannerNotificationProps) => {
-  const [isLGScreen] = useMediaQuery(`min-width: ${oldTheme.breakpoints.l}`)
+  if (!shouldShow) return <></>
   return (
-    <>
-      {shouldShow && (
-        <Center
-          as="aside"
-          maxW={isLGScreen ? oldTheme.variables.maxPageWidth : "100%"}
-          w="100%"
-          py="4"
-          px="8"
-          bg="primary.base"
-          color="background.base"
-          sx={{
-            a: {
-              color: "background.base",
-            },
-          }}
-          {...props}
-        >
-          {children}
-        </Center>
-      )}
-    </>
+    <aside
+      className="flex items-center justify-center gap-2 bg-primary-action px-8 py-4 text-white [&_a]:text-white [&_a]:hover:text-white/80"
+      {...props}
+    >
+      {children}
+    </aside>
   )
 }
 

src/components/Banners/DismissableBanner/index.tsx

@@ -1,11 +1,11 @@
-// Libraries
-import React, { useEffect, useState } from "react"
-import { Center, CloseButton } from "@chakra-ui/react"
+import { useEffect, useState } from "react"
+import { MdClose } from "react-icons/md"
+
+import { Button } from "@/components/ui/buttons/Button"
+import { Center } from "@/components/ui/flex"
 
-// Components
 import BannerNotification from "../BannerNotification"
 
-// Interface
 export type DismissableBannerProps = {
   children: JSX.Element
   storageKey: string
@@ -28,13 +28,11 @@ const DismissableBanner = ({
   }
 
   return (
-    <BannerNotification shouldShow={show} gap="8">
-      <Center marginInlineStart="auto">{children}</Center>
-      <CloseButton
-        marginInlineStart="auto"
-        onClick={onClose}
-        aria-label="Close Banner"
-      />
+    <BannerNotification shouldShow={show} className="gap-8">
+      <Center className="ms-auto">{children}</Center>
+      <Button className="ms-auto" onClick={onClose} aria-label="Close Banner">
+        <MdClose />
+      </Button>
     </BannerNotification>
   )
 }

src/layouts/UseCases.tsx

@@ -177,7 +177,7 @@ export const UseCasesLayout = ({
       width="full"
       dir={contentNotTranslated ? "ltr" : "unset"}
     >
-      <BannerNotification shouldShow zIndex="sticky" hideBelow={lgBp}>
+      <BannerNotification shouldShow className="z-sticky max-lg:hidden">
         <Emoji text=":pencil:" className="me-4 shrink-0 text-2xl" />
         <Text m={0}>
           {t("template-usecase:template-usecase-banner")}{" "}