fwt/components/Column/Column.sass

@@ -1,39 +0,0 @@
-.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

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

fwt/components/Row/Row.sass

@@ -1,47 +0,0 @@
-.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

@@ -1,18 +0,0 @@
-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,9 +5,7 @@ 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'
-import Row from '../../fwt/components/Row/Row'
-import Column from '../../fwt/components/Column/Column'
+import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
 ---
 
 <Layout title="Home">
@@ -16,13 +14,11 @@ import Column from '../../fwt/components/Column/Column'
     <Button edges="rounded" label="Back to Home" to="/" />
 
     <section class="image">
-      <!-- <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>
+      <!-- <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} />
     </section>
   </Page>
 </Layout>
@@ -38,8 +34,8 @@ import Column from '../../fwt/components/Column/Column'
     height: auto
 
   .image
-    margin: 4rem 0 0 0
+    margin: 2rem 0 0 0
     border-radius: 4px
-    width: 100%
+    max-width: 100%
     height: auto
 </style>