space buttons

Author: jdevdevdev

src/app/bigtextconfig/page.module.css

@@ -11,9 +11,30 @@
 .page {
   font-family: var(--font-geist-mono);
 }
+
 .BigTextConfig {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-items: center;
-}
+}
+.BigTextConfig--ButtonPanel {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  justify-items: stretch;
+  grid-template-areas:
+    "qr . bigtext"
+    ". . ."
+    ". delete .";
+}
+
+.BigTextConfig--qr {
+  grid-area: qr;
+}
+.BigTextConfig--bigtext {
+  grid-area: bigtext;
+}
+.BigTextConfig--delete {
+  grid-area: delete;
+}

src/app/bigtextconfig/page.tsx

@@ -20,35 +20,40 @@ export default function Page() {
           setText(data);
         }}
       />
-      <div>
-        <LargeButtonComponent
-          buttonType={"clear"}
-          onClick={() => {
-            setFullscreenContent("qrcode");
-            setOrientation("vertical");
-            setFullscreen(true);
-          }}
-        >
-          <Image src="/qrcode.svg" alt="show qr code" width={100} height={100} />
-        </LargeButtonComponent>
-        <LargeButtonComponent
-          buttonType={"clear"}
-          onClick={() => {
-            setText("");
-          }}
-        >
-          <Image src="/trashcan.svg" alt="clear" width={100} height={100} />
-        </LargeButtonComponent>
-        <LargeButtonComponent
-          buttonType={"clear"}
-          onClick={() => {
-            setFullscreenContent("text");
-            setOrientation("vertical");
-            setFullscreen(true);
-          }}
-        >
-          <Image src="/fullscreen.svg" alt="fullscreen" width={100} height={100} />
-        </LargeButtonComponent>
+      <div className={styles["BigTextConfig--ButtonPanel"]}>
+        <div className={styles["BigTextConfig--qr"]}>
+          <LargeButtonComponent
+            buttonType={"clear"}
+            onClick={() => {
+              setFullscreenContent("qrcode");
+              setOrientation("vertical");
+              setFullscreen(true);
+            }}
+          >
+            <Image src="/qrcode.svg" alt="show qr code" width={100} height={100} />
+          </LargeButtonComponent>
+        </div>
+        <div className={styles["BigTextConfig--bigtext"]}>
+          <LargeButtonComponent
+            buttonType={"clear"}
+            onClick={() => {
+              setFullscreenContent("text");
+              setOrientation("vertical");
+              setFullscreen(true);
+            }}
+          >
+            <Image src="/fullscreen.svg" alt="fullscreen" width={100} height={100} />
+          </LargeButtonComponent>
+        </div>
+        <div className={styles["BigTextConfig--delete"]}>
+          <LargeButtonComponent
+            onClick={() => {
+              setText("");
+            }}
+          >
+            <Image src="/trashcan.svg" alt="clear" width={100} height={100} />
+          </LargeButtonComponent>
+        </div>
       </div>
     </div>
     <FullscreenComponent