refactor: ♻️ add gridRatio to support two app grids

apps/taxes/src/modules/ui/app-columns.tsx

@@ -1,19 +1,30 @@
 import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 
+const ratioMap = {
+  "1/1": "1fr 1fr",
+  "1/2": "1fr 2fr",
+};
+
+type Ratio = keyof typeof ratioMap;
+
+type AppColumnsProps = {
+  top: React.ReactNode;
+  bottomLeft: React.ReactNode;
+  bottomRight: React.ReactNode;
+  gridRatio?: Ratio;
+};
+
 export const AppColumns = ({
   top,
   bottomLeft,
   bottomRight,
-}: {
+  gridRatio = "1/1",
-  top: React.ReactNode;
+}: AppColumnsProps) => {
-  bottomLeft: React.ReactNode;
-  bottomRight: React.ReactNode;
-}) => {
   return (
     <Box display={"grid"} __gap={"60px"}>
       <Box>{top}</Box>
-      <Box display={"grid"} gridTemplateColumns={2} gap={10}>
+      <Box display={"grid"} gap={10} __gridTemplateColumns={ratioMap[gridRatio]}>
         <Box>{bottomLeft}</Box>
         <Box>{bottomRight}</Box>
       </Box>

apps/taxes/src/pages/configuration.tsx

@@ -28,7 +28,12 @@ const Intro = () => {
 const ConfigurationPage = () => {
   return (
     <main>
-      <AppColumns top={<Header />} bottomLeft={<Intro />} bottomRight={<Providers />} />
+      <AppColumns
+        gridRatio="1/2"
+        top={<Header />}
+        bottomLeft={<Intro />}
+        bottomRight={<Providers />}
+      />
     </main>
   );
 };