From 7e6e7521b5c1760e2e7ab60c08ad53047530507a Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Fri, 10 Dec 2021 00:12:02 -0600
Subject: [PATCH] Add Row, Col, and Spacer components

---
 web/components/layout/col.tsx    | 5 +++++
 web/components/layout/row.tsx    | 5 +++++
 web/components/layout/spacer.tsx | 8 ++++++++
 3 files changed, 18 insertions(+)
 create mode 100644 web/components/layout/col.tsx
 create mode 100644 web/components/layout/row.tsx
 create mode 100644 web/components/layout/spacer.tsx

diff --git a/web/components/layout/col.tsx b/web/components/layout/col.tsx
new file mode 100644
index 00000000..da71f130
--- /dev/null
+++ b/web/components/layout/col.tsx
@@ -0,0 +1,5 @@
+export function Col(props: { children?: any; className?: string }) {
+  const { children, className } = props
+
+  return <div className={`${className} flex flex-col`}>{children}</div>
+}
diff --git a/web/components/layout/row.tsx b/web/components/layout/row.tsx
new file mode 100644
index 00000000..4faaeb6c
--- /dev/null
+++ b/web/components/layout/row.tsx
@@ -0,0 +1,5 @@
+export function Row(props: { children?: any; className?: string }) {
+  const { children, className } = props
+
+  return <div className={`${className} flex flex-row`}>{children}</div>
+}
diff --git a/web/components/layout/spacer.tsx b/web/components/layout/spacer.tsx
new file mode 100644
index 00000000..04a9b0d7
--- /dev/null
+++ b/web/components/layout/spacer.tsx
@@ -0,0 +1,8 @@
+export function Spacer(props: { w?: number; h?: number }) {
+  const { w, h } = props
+
+  const width = w === undefined ? undefined : w * 0.25 + 'rem'
+  const height = h === undefined ? undefined : h * 0.25 + 'rem'
+
+  return <div style={{ width, height, flexShrink: 0 }} />
+}