From c2d99f8b1bc2b548c639f520026560afea6efe41 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Fri, 29 Aug 2025 10:23:41 +0800
Subject: [PATCH 1/3] Added flexbox components

---
 fwt/components/Column/Column.sass | 39 +++++++++++++++++++++++++
 fwt/components/Column/Column.tsx  | 17 +++++++++++
 fwt/components/Row/Row.sass       | 47 +++++++++++++++++++++++++++++++
 fwt/components/Row/Row.tsx        | 18 ++++++++++++
 4 files changed, 121 insertions(+)
 create mode 100644 fwt/components/Column/Column.sass
 create mode 100644 fwt/components/Column/Column.tsx
 create mode 100644 fwt/components/Row/Row.sass
 create mode 100644 fwt/components/Row/Row.tsx

diff --git a/fwt/components/Column/Column.sass b/fwt/components/Column/Column.sass
new file mode 100644
index 0000000..7a9309e
--- /dev/null
+++ b/fwt/components/Column/Column.sass
@@ -0,0 +1,39 @@
+.top
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.center
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.right
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.split
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.spaced
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center
diff --git a/fwt/components/Column/Column.tsx b/fwt/components/Column/Column.tsx
new file mode 100644
index 0000000..9e84a11
--- /dev/null
+++ b/fwt/components/Column/Column.tsx
@@ -0,0 +1,17 @@
+import './Column.sass'
+
+interface Props {
+  children: any
+  content: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <div class={props.content} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </div>
+    </>
+  )
+}
diff --git a/fwt/components/Row/Row.sass b/fwt/components/Row/Row.sass
new file mode 100644
index 0000000..a103f5c
--- /dev/null
+++ b/fwt/components/Row/Row.sass
@@ -0,0 +1,47 @@
+.left
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.center
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.right
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.split
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.spaced
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center
+
+.even
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-evenly
+  align-items: center
+  align-content: center
diff --git a/fwt/components/Row/Row.tsx b/fwt/components/Row/Row.tsx
new file mode 100644
index 0000000..feb34a5
--- /dev/null
+++ b/fwt/components/Row/Row.tsx
@@ -0,0 +1,18 @@
+import './Row.sass'
+// import { Switch, Match } from 'solid-js'
+
+interface Props {
+  children: any
+  content: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <div class={props.content} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </div>
+    </>
+  )
+}

From ab99131b4e6c5352d7609191684851007b56d7f0 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Fri, 29 Aug 2025 10:23:54 +0800
Subject: [PATCH 2/3] Added radius

---
 fwt/components/Image/Image.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/fwt/components/Image/Image.tsx b/fwt/components/Image/Image.tsx
index 2df6d4c..d885641 100644
--- a/fwt/components/Image/Image.tsx
+++ b/fwt/components/Image/Image.tsx
@@ -3,6 +3,7 @@ interface Props {
   webp: string
   size?: number
   alt?: string
+  radius?: number
 }
 
 export default (props: Props) => {
@@ -11,7 +12,7 @@ export default (props: Props) => {
       <picture>
         <source srcset={props.avif} type="image/avif" />
         <source srcset={props.webp} type="image/webp" />
-        <img width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
       </picture>
     </>
   )

From 91015d72de39cf820d94ee44946379adedc6be4f Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Fri, 29 Aug 2025 10:26:10 +0800
Subject: [PATCH 3/3] Added flexbox

---
 src/pages/next.astro | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/next.astro b/src/pages/next.astro
index c3b3cf4..367262c 100644
--- a/src/pages/next.astro
+++ b/src/pages/next.astro
@@ -5,7 +5,9 @@ import Image from '../../fwt/components/Image/Image'
 import Page from '../../fwt/components/Page/Page'
 import sample1 from '../../fwt/images/sample.avif'
 import sample2 from '../../fwt/images/sample.webp'
-import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
+import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage'
+import Row from '../../fwt/components/Row/Row'
+import Column from '../../fwt/components/Column/Column'
 ---
 
 <Layout title="Home">
@@ -14,11 +16,13 @@ import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
     <Button edges="rounded" label="Back to Home" to="/" />
 
     <section class="image">
-      <!-- <OptimizeImage src="sample.png" size={400} /> -->
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+      <!-- <OptimizeImage src="batman.png" size={400} /> -->
+      <Row content="center" gap={1}>
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+      </Row>
     </section>
   </Page>
 </Layout>
@@ -34,8 +38,8 @@ import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
     height: auto
 
   .image
-    margin: 2rem 0 0 0
+    margin: 4rem 0 0 0
     border-radius: 4px
-    max-width: 100%
+    width: 100%
     height: auto
 </style>