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

Fixed bugs

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-02 16:35:18 +08:00
parent f4beb0bea5
commit af311111c6
4 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

10
fwt/components/Column/Column.sass
View file

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

6
fwt/components/Column/Column.tsx
View file

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

12
fwt/components/Row/Row.sass
View file

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

8
fwt/components/Row/Row.tsx
View file

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