From f4beb0bea506b3f44ddceadb7df3debe3c836e41 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 2 Sep 2025 16:08:33 +0800
Subject: [PATCH] Added box component

---
 fwt/components/Box/Box.sass |  6 ++++++
 fwt/components/Box/Box.tsx  | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 fwt/components/Box/Box.sass
 create mode 100644 fwt/components/Box/Box.tsx

diff --git a/fwt/components/Box/Box.sass b/fwt/components/Box/Box.sass
new file mode 100644
index 0000000..17165bb
--- /dev/null
+++ b/fwt/components/Box/Box.sass
@@ -0,0 +1,6 @@
+.box
+  padding: 1rem
+
+.curvedbox
+  @extend .box
+  border-radius: 8px
diff --git a/fwt/components/Box/Box.tsx b/fwt/components/Box/Box.tsx
new file mode 100644
index 0000000..dc71de3
--- /dev/null
+++ b/fwt/components/Box/Box.tsx
@@ -0,0 +1,20 @@
+import type { ImageMetadata } from 'astro'
+import './Box.sass'
+import { Show, type JSXElement, createMemo } from 'solid-js'
+
+interface Props {
+  thickness: number
+  color?: string
+  children: JSXElement
+  curved?: boolean
+}
+
+export default (props: Props) => {
+  const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
+
+  return (
+    <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
+      {props.children}
+    </section>
+  )
+}