From ded37d61c34e5fffa35332577b9e947142632ff6 Mon Sep 17 00:00:00 2001
From: Adrian Pilarczyk <adrianpilarczyk314@gmail.com>
Date: Fri, 19 May 2023 09:47:39 +0200
Subject: [PATCH] refactor: :recycle: add gridRatio to support two app grids

---
 apps/taxes/src/modules/ui/app-columns.tsx | 23 +++++++++++++++++------
 apps/taxes/src/pages/configuration.tsx    |  7 ++++++-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/taxes/src/modules/ui/app-columns.tsx b/apps/taxes/src/modules/ui/app-columns.tsx
index 9cde9ed..a877e8f 100644
--- a/apps/taxes/src/modules/ui/app-columns.tsx
+++ b/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,
-}: {
-  top: React.ReactNode;
-  bottomLeft: React.ReactNode;
-  bottomRight: React.ReactNode;
-}) => {
+  gridRatio = "1/1",
+}: AppColumnsProps) => {
   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>
diff --git a/apps/taxes/src/pages/configuration.tsx b/apps/taxes/src/pages/configuration.tsx
index 18d42d0..b45f407 100644
--- a/apps/taxes/src/pages/configuration.tsx
+++ b/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>
   );
 };