feat: migrate BannerGrid to tailwind

Author: saurabhburade

src/components/BannerGrid/index.tsx

@@ -1,117 +1,44 @@
 import React from "react"
-import { Box, Flex, Grid, useToken } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
+import { Flex } from "@/components/ui/flex"
+
 export const Banner = ({ children }: ChildOnlyProp) => {
   return (
-    <Flex
-      w="full"
-      background="bannerGridGradient"
-      direction={{ base: "column", lg: "row" }}
-      wrap="nowrap"
-      sx={{
-        h2: {
-          mt: 0,
-        },
-        ul: {
-          mb: 0,
-        },
-      }}
-    >
+    <Flex className="flex-col flex-nowrap bg-banner-grid-gradient lg:flex-row [&_h2]:mt-0 [&_ul]:mb-0">
       {children}
     </Flex>
   )
 }
 
 export const BannerBody = ({ children }: ChildOnlyProp) => {
   return (
-    <Box flex={4} p={10}>
-      {children}
-    </Box>
+    <div className="flex-shrink-[1] flex-grow-[4] basis-0 p-10">{children}</div>
   )
 }
 
-export const BannerImage = ({ children }: ChildOnlyProp) => {
+export const BannerImage = ({ children }) => {
   return (
-    <Flex justifyContent="end" flex={2} alignSelf="end">
+    <div className="flex flex-shrink-[1] flex-grow-[2] basis-0 justify-end self-end">
       {children}
-    </Flex>
+    </div>
   )
 }
 
 export const BannerGrid = ({ children }: ChildOnlyProp) => {
   return (
-    <Grid
-      templateColumns={{
-        base: "repeat(1,1fr)",
-        md: "repeat(2,1fr)",
-        lg: "repeat(3,1fr)",
-      }}
-      templateRows={{
-        md: "repeat(3, 1fr)",
-        lg: "repeat(2, 1fr)",
-      }}
-      columnGap={0}
-      rowGap={0}
-    >
+    <div className="grid grid-cols-1 gap-0 md:grid-cols-2 md:grid-rows-3 lg:grid-cols-3 lg:grid-rows-2">
       {children}
-    </Grid>
+    </div>
   )
 }
 
 export const BannerGridCell = ({ children }: ChildOnlyProp) => {
-  const [medBp, lgBp] = useToken("breakpoints", ["md", "lg"])
-
   return (
     <Flex
-      px={{ base: 0, md: 12 }}
-      py={8}
-      direction="column"
-      borderTop="1px solid"
-      borderTopColor="searchBackground"
-      borderInlineStart={{ base: 0, md: "1px solid" }}
-      borderInlineStartColor={{ md: "searchBackground" }}
-      sx={{
-        "&:first-child": {
-          borderTop: 0,
-        },
-        [`@media (min-width: ${medBp})`]: {
-          "&:nth-child(-n + 2)": {
-            borderTop: 0,
-          },
-          "&:nth-child(2n + 1)": {
-            borderInlineStart: 0,
-          },
-        },
-        [`@media (min-width: ${lgBp})`]: {
-          "&:first-child": {
-            ps: 0,
-            borderInlineStart: 0,
-          },
-          "&:nth-child(-n + 2)": {
-            borderTop: "1px solid",
-            borderTopColor: "searchBackground",
-          },
-          "&:nth-child(2n + 1)": {
-            borderInlineStart: "1px solid",
-            borderInlineStartColor: "searchBackground",
-          },
-          "&:nth-child(-n + 3)": {
-            borderTop: 0,
-            justifyContent: "start",
-            paddingTop: 0,
-          },
-          "&:nth-child(3n + 1)": {
-            ps: 0,
-            borderInlineStart: 0,
-          },
-          "&:nth-child(n + 4)": {
-            justifyContent: "start",
-            paddingBottom: 0,
-          },
-        },
-      }}
+      // TODO:  refactor className to make it more readable
+      className={`flex-col border-t border-t-search-background px-0 py-8 first:border-t-0 md:border-l md:border-l-search-background md:px-12 lg:[&:first-child]:border-l-0 lg:[&:first-child]:ps-0 md:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(-n+2)]:border-t lg:[&:nth-child(-n+2)]:border-t-search-background lg:[&:nth-child(-n+3)]:justify-start lg:[&:nth-child(-n+3)]:border-t-0 lg:[&:nth-child(-n+3)]:pt-0 md:[&:nth-child(2n+1)]:border-l-0 lg:[&:nth-child(2n+1)]:border-l lg:[&:nth-child(2n+1)]:border-l-search-background lg:[&:nth-child(3n+1)]:border-l-0 lg:[&:nth-child(3n+1)]:ps-0 lg:[&:nth-child(n+4)]:justify-start lg:[&:nth-child(n+4)]:pb-0`}
     >
       {children}
     </Flex>

src/styles/global.css

@@ -116,6 +116,13 @@
     --table-box-shadow: 0 14px 66px rgba(0, 0, 0, 0.07),
       0 10px 17px rgba(0, 0, 0, 0.03), 0 4px 7px rgba(0, 0, 0, 0.05);
     --table-item-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    --banner-grid-gradient: linear-gradient(
+      90deg,
+      rgba(127, 127, 213, 0.2) 0%,
+      rgba(132, 145, 221, 0.2) 50%,
+      rgba(145, 234, 228, 0.2) 100%
+    );
+    --search-background: var(--background);
   }
 
   [data-theme="dark"] {
@@ -176,6 +183,12 @@
     --table-box-shadow: 0 14px 66px hsla(0, 0%, 96.1%, 0.07),
       0 10px 17px hsla(0, 0%, 96.1%, 0.03), 0 4px 7px hsla(0, 0%, 96.1%, 0.05);
     --table-item-box-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.1);
+    --banner-grid-gradient: linear-gradient(
+      90deg,
+      rgba(172, 182, 229, 0.08) 0%,
+      rgba(134, 253, 232, 0.08) 100%
+    );
+    --search-background: #4c4c4c;
   }
 }
 

tailwind.config.ts

@@ -127,6 +127,7 @@ const config = {
         "tooltip-shadow": "var(--tooltip-shadow)",
         "switch-background": "var(--switch-background)",
         "hub-hero-content-bg": "var(--hub-hero-content-bg)",
+        "search-background": "var(--search-background)",
         attention: {
           DEFAULT: "var(--attention)",
           light: "var(--attention-light)",
@@ -148,6 +149,7 @@ const config = {
       backgroundImage: {
         "main-gradient": "var(--main-gradient)",
         "feedback-gradient": "var(--feedback-gradient)",
+        "banner-grid-gradient": "var(--banner-grid-gradient)",
       },
       boxShadow: {
         "table-box": "var(--table-box-shadow)",