fwt/components/Box/Box.sass

@@ -1,6 +0,0 @@
-.box
-  padding: 1rem
-
-.curvedbox
-  @extend .box
-  border-radius: 8px

fwt/components/Box/Box.tsx

@@ -1,20 +0,0 @@
-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>
-  )
-}

fwt/components/Column/Column.sass

@@ -1,4 +1,4 @@
-.column-top
+.top
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.column-center
+.center
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.column-right
+.right
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.column-split
+.split
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.column-spaced
+.spaced
   display: flex
   flex-direction: column
   flex-wrap: wrap

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 (
     <>
-      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+      <div class={props.content} style={`gap: ${props.gap}rem`}>
         {props.children}
-      </section>
+      </div>
     </>
   )
 }

fwt/components/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import './Footer.sass'
 import type { JSXElement } from 'solid-js'
+import Row from '../Row/Row'
 
 interface Props {
   children: JSXElement

fwt/components/Form/Form.tsx

@@ -1,15 +1,19 @@
 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 (
     <>
-      <form method="post" enctype="application/x-www-form-urlencoded">
+      <form method="post">
         {props.children}
+        <Button submit label="Submit" edges={props.edges || 'flat'} design={props.design} />
       </form>
     </>
   )

fwt/components/Row/Row.sass

@@ -1,4 +1,4 @@
-.row-left
+.left
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.row-center
+.center
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.row-right
+.right
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.row-split
+.split
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.row-spaced
+.spaced
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -38,7 +38,7 @@
   align-items: center
   align-content: center
 
-.row-even
+.even
   display: flex
   flex-direction: row
   flex-wrap: wrap

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 (
     <>
       <Show when={props.gap}>
-        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        <div class={props.content} style={`gap: ${props.gap}rem`}>
           {props.children}
-        </section>
+        </div>
       </Show>
 
       <Show when={!props.gap}>
-        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
+        <div class={props.content}>{props.children}</div>
       </Show>
     </>
   )

src/pages/index.astro

@@ -34,10 +34,10 @@ import Copyright from '../../fwt/components/Copyright/Copyright'
         <Copyright year="2025" name="Pat Alcala" />
       </Row>
     </Footer>
+
+    <style lang="sass">
+      h1
+        color: #3377AC
+    </style>
   </Page>
 </Layout>
-
-<style lang="sass">
-  h1
-    color: #3377AC
-</style>