fix: Pdf templates layout

This commit is contained in:
Ahmed Bouhuolia
2024-10-05 19:01:34 +02:00
parent 90f08c5d51
commit af5726c48c
9 changed files with 184 additions and 145 deletions

View File

@@ -27,11 +27,14 @@ export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {
/** Defines align-items css property */
align?: React.CSSProperties['alignItems'];
flex?: React.CSSProperties['flex'];
}
const defaultProps: Partial<GroupProps> = {
position: 'left',
spacing: 20,
flex: 'none'
};
export function Group({ children, ...props }: GroupProps) {
@@ -48,6 +51,7 @@ const GroupStyled = styled(Box)`
box-sizing: border-box;
display: flex;
flex-direction: row;
flex: ${(props: GroupProps) => (props.flex)};
align-items: ${(props: GroupProps) => (props.align || 'center')};
flex-wrap: ${(props: GroupProps) => (props.noWrap ? 'nowrap' : 'wrap')};
justify-content: ${(props: GroupProps) =>

View File

@@ -11,12 +11,15 @@ export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
/** justify-content CSS property */
justify?: React.CSSProperties['justifyContent'];
flex?: React.CSSProperties['flex'];
}
const defaultProps: Partial<StackProps> = {
spacing: 20,
align: 'stretch',
justify: 'top',
flex: 'none',
};
export function Stack(props: StackProps) {
@@ -33,4 +36,5 @@ const StackStyled = styled(Box)`
align-items: ${(props: StackProps) => props.align};
justify-content: justify;
gap: ${(props: StackProps) => props.spacing}px;
flex: ${(props: StackProps) => props.flex};
`;