Fixed padding props

This commit is contained in:
Patrick Alvin Alcala 2025-10-01 12:38:46 +08:00
parent 7af0425b0c
commit 458a87d546
2 changed files with 4 additions and 3 deletions

View file

@ -6,7 +6,7 @@ interface Props {
color?: string color?: string
children: JSXElement children: JSXElement
curved?: boolean curved?: boolean
padding?: number padding?: string
background?: string background?: string
} }
@ -14,7 +14,7 @@ export default (props: Props) => {
const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box')) const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
return ( return (
<section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding}rem; background-color: ${props.background || 'none'}`}> <section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding || 0}; background-color: ${props.background || 'none'}`}>
{props.children} {props.children}
</section> </section>
) )

View file

@ -5,12 +5,13 @@ interface Props {
children: JSXElement children: JSXElement
content?: 'top' | 'center' | 'bottom' | 'split' | 'spaced' content?: 'top' | 'center' | 'bottom' | 'split' | 'spaced'
gap?: number gap?: number
padding?: string
} }
export default (props: Props) => { export default (props: Props) => {
return ( return (
<> <>
<section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}> <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem; padding: ${props.padding || 0}`}>
{props.children} {props.children}
</section> </section>
</> </>