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] 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>
+    </>
+  )
+}