PatAlcala9/fwt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added flexbox

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-08-29 10:26:10 +08:00
parent ab99131b4e
commit 91015d72de
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/pages/next.astro
View file

@ -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>