Simple components for resposive layout in react

Exemple.tsx

import { Box, VerticalStack, HorizontalStack, Center } from './Flex';

export function Example() {
  return (
    <Center
      as="section"
      style={{
        backgroundColor: '#292929',
        height: '100vh',
        padding: '1rem',
      }}
    >
      <VerticalStack as="article">
        <VerticalStack>
          <Box style={{ backgroundColor: 'lightblue' }}>lightblue</Box>
          <Box style={{ backgroundColor: 'lightgreen' }}>lightgreen</Box>
          <Box style={{ backgroundColor: 'lightcoral' }}>lightcoral</Box>
        </VerticalStack>
        <HorizontalStack>
          <Box style={{ backgroundColor: 'turquoise' }}>turquoise</Box>
          <Box style={{ backgroundColor: 'deeppink' }}>deeppink</Box>
          <Box style={{ backgroundColor: 'violet' }}>violet</Box>
        </HorizontalStack>
      </VerticalStack>
    </Center>
  );
}

Flex.tsx

import { CSSProperties, HTMLAttributes, ReactNode } from 'react';

type Pretify<T> = {
  [K in keyof T]: T[K];
} & {};

type FlexProps = {
  as?: keyof JSX.IntrinsicElements;
  direction?: CSSProperties['flexDirection'];
  align?: CSSProperties['alignItems'];
  justify?: CSSProperties['justifyContent'];
  grow?: CSSProperties['flexGrow'];
  gap?: CSSProperties['gap'];
  children: ReactNode;
  style?: CSSProperties;
} & HTMLAttributes<Omit<HTMLDivElement, 'style'>>;

export type BoxProps = Pretify<FlexProps>;

export type StackProps = Pretify<Omit<FlexProps, 'direction'>>;

export type CenterProps = Pretify<Omit<FlexProps, 'align' | 'justify'>>;

export function Box({
  children,
  direction = 'row',
  align = 'flex-start',
  justify = 'flex-start',
  grow = '1',
  gap = '0',
  style = {},
  as: Compoent = 'div',
}: BoxProps) {
  const flexStyle: CSSProperties = {
    display: 'flex',
    flexDirection: direction,
    alignItems: align,
    justifyContent: justify,
    gap,
    flexGrow: grow,
    width: '100%',
  };

  return <Compoent style={{ ...flexStyle, ...style }}>{children}</Compoent>;
}

export function HorizontalStack(props: StackProps) {
  return <Box direction="row" {...props} />;
}

export function VerticalStack(props: StackProps) {
  return <Box direction="column" {...props} />;
}

export function Center(props: CenterProps) {
  return <Box align="center" justify="center" {...props} />;
}

export const Flex = {
  Box,
  HorizontalStack,
  VerticalStack,
  Center,
};