Added flexbox

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

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

fwt/components/Image/Image.tsx

@@ -3,6 +3,7 @@ interface Props {
   webp: string
   size?: number
   alt?: string
+  radius?: number
 }
 
 export default (props: Props) => {
@@ -11,7 +12,7 @@ export default (props: Props) => {
       <picture>
         <source srcset={props.avif} type="image/avif" />
         <source srcset={props.webp} type="image/webp" />
-        <img width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
       </picture>
     </>
   )

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

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

src/pages/next.astro

@@ -5,7 +5,9 @@ import Image from '../../fwt/components/Image/Image'
 import Page from '../../fwt/components/Page/Page'
 import sample1 from '../../fwt/images/sample.avif'
 import sample2 from '../../fwt/images/sample.webp'
-import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
+import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage'
+import Row from '../../fwt/components/Row/Row'
+import Column from '../../fwt/components/Column/Column'
 ---
 
 <Layout title="Home">
@@ -14,11 +16,13 @@ import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
     <Button edges="rounded" label="Back to Home" to="/" />
 
     <section class="image">
-      <!-- <OptimizeImage src="sample.png" size={400} /> -->
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+      <!-- <OptimizeImage src="batman.png" size={400} /> -->
+      <Row content="center" gap={1}>
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+      </Row>
     </section>
   </Page>
 </Layout>
@@ -34,8 +38,8 @@ import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
     height: auto
 
   .image
-    margin: 2rem 0 0 0
+    margin: 4rem 0 0 0
     border-radius: 4px
-    max-width: 100%
+    width: 100%
     height: auto
 </style>