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 (
+
+ )
+}
diff --git a/fwt/components/Column/Column.sass b/fwt/components/Column/Column.sass
index 7a9309e..b26f108 100644
--- a/fwt/components/Column/Column.sass
+++ b/fwt/components/Column/Column.sass
@@ -1,4 +1,4 @@
-.top
+.column-top
display: flex
flex-direction: column
flex-wrap: wrap
@@ -6,7 +6,7 @@
align-items: center
align-content: center
-.center
+.column-center
display: flex
flex-direction: column
flex-wrap: wrap
@@ -14,7 +14,7 @@
align-items: center
align-content: center
-.right
+.column-right
display: flex
flex-direction: column
flex-wrap: wrap
@@ -22,7 +22,7 @@
align-items: center
align-content: center
-.split
+.column-split
display: flex
flex-direction: column
flex-wrap: wrap
@@ -30,7 +30,7 @@
align-items: center
align-content: center
-.spaced
+.column-spaced
display: flex
flex-direction: column
flex-wrap: wrap
diff --git a/fwt/components/Column/Column.tsx b/fwt/components/Column/Column.tsx
index 27e0e05..3f5c786 100644
--- a/fwt/components/Column/Column.tsx
+++ b/fwt/components/Column/Column.tsx
@@ -3,16 +3,16 @@ import './Column.sass'
interface Props {
children: JSXElement
- content: 'top' | 'center' | 'right' | 'split' | 'spaced'
+ content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
gap?: number
}
export default (props: Props) => {
return (
<>
-
+
+
>
)
}
diff --git a/fwt/components/Footer/Footer.tsx b/fwt/components/Footer/Footer.tsx
index a8f4780..2c47f07 100644
--- a/fwt/components/Footer/Footer.tsx
+++ b/fwt/components/Footer/Footer.tsx
@@ -1,6 +1,5 @@
import './Footer.sass'
import type { JSXElement } from 'solid-js'
-import Row from '../Row/Row'
interface Props {
children: JSXElement
diff --git a/fwt/components/Form/Form.tsx b/fwt/components/Form/Form.tsx
index 9436017..a498c76 100644
--- a/fwt/components/Form/Form.tsx
+++ b/fwt/components/Form/Form.tsx
@@ -1,19 +1,15 @@
import './Form.sass'
import type { JSXElement } from 'solid-js'
-import Button from '../Button/Button'
interface Props {
children: JSXElement
- edges?: 'curved' | 'rounded' | 'flat'
- design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
}
export default (props: Props) => {
return (
<>
-
>
)
diff --git a/fwt/components/Row/Row.sass b/fwt/components/Row/Row.sass
index a103f5c..6162bbe 100644
--- a/fwt/components/Row/Row.sass
+++ b/fwt/components/Row/Row.sass
@@ -1,4 +1,4 @@
-.left
+.row-left
display: flex
flex-direction: row
flex-wrap: wrap
@@ -6,7 +6,7 @@
align-items: center
align-content: center
-.center
+.row-center
display: flex
flex-direction: row
flex-wrap: wrap
@@ -14,7 +14,7 @@
align-items: center
align-content: center
-.right
+.row-right
display: flex
flex-direction: row
flex-wrap: wrap
@@ -22,7 +22,7 @@
align-items: center
align-content: center
-.split
+.row-split
display: flex
flex-direction: row
flex-wrap: wrap
@@ -30,7 +30,7 @@
align-items: center
align-content: center
-.spaced
+.row-spaced
display: flex
flex-direction: row
flex-wrap: wrap
@@ -38,7 +38,7 @@
align-items: center
align-content: center
-.even
+.row-even
display: flex
flex-direction: row
flex-wrap: wrap
diff --git a/fwt/components/Row/Row.tsx b/fwt/components/Row/Row.tsx
index 0e3176b..5255e9c 100644
--- a/fwt/components/Row/Row.tsx
+++ b/fwt/components/Row/Row.tsx
@@ -3,7 +3,7 @@ import { Show, type JSXElement } from 'solid-js'
interface Props {
children: JSXElement
- content: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+ content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
gap?: number
}
@@ -11,13 +11,13 @@ export default (props: Props) => {
return (
<>
-
+
+
- {props.children}
+
>
)
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a42c855..ca71087 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -34,10 +34,10 @@ import Copyright from '../../fwt/components/Copyright/Copyright'
-
-
+
+