From d083411adf032abdd18e71d917b6c1235b149ecd Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 27 Aug 2025 15:19:23 +0800
Subject: [PATCH] Changed to alignment mode

---
 src/builtin-components/Page/Page.sass | 13 ++++++++-----
 src/builtin-components/Page/Page.tsx  | 10 +++++-----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/builtin-components/Page/Page.sass b/src/builtin-components/Page/Page.sass
index 9c18c92..3d97ca8 100644
--- a/src/builtin-components/Page/Page.sass
+++ b/src/builtin-components/Page/Page.sass
@@ -1,12 +1,15 @@
 .page
   margin: 2rem
-  // width: 100vw
+  height: auto
 
-.page-column
+.column
+  @extend .page
   display: flex
   flex-direction: column
-  flex-wrap: wrap
+  text-align: center
   justify-content: center
   align-items: center
-  align-content: center
-  margin: 2rem
+
+.row
+  @extend .column
+  flex-direction: row
diff --git a/src/builtin-components/Page/Page.tsx b/src/builtin-components/Page/Page.tsx
index 1701d27..d16977f 100644
--- a/src/builtin-components/Page/Page.tsx
+++ b/src/builtin-components/Page/Page.tsx
@@ -1,18 +1,18 @@
 import './Page.sass'
-import { Show } from 'solid-js'
+import { Show, Switch, Match } from 'solid-js'
 
 interface Props {
   children?: any
-  column?: boolean
+  alignment?: 'row' | 'column'
 }
 
 export default (props: Props) => {
   return (
     <>
-      <Show when={props.column}>
-        <main class="page-column">{props.children}</main>
+      <Show when={props.alignment}>
+        <main class={props.alignment}>{props.children}</main>
       </Show>
-      <Show when={!props.column}>
+      <Show when={!props.alignment}>
         <main class="page">{props.children}</main>
       </Show>
     </>