vroom-react/src/components/layout/styles/layout04/layout.style.ts

Vroom React UI

const columnRepeat = (n: number): string => {
  switch (n) {
    case 0:
    case 1:
      return '1fr'
    default:
      return 'repeat(2, 1fr)'
  }
}

const rowRepeat = (n: number): string => {
  switch (n) {
    case 0:
      return '1fr'
    case 1:
    case 2:
    case 3:
      return 'repeat(2, 1fr)'
    default:
      return 'repeat(3, 1fr)'
  }
}

export const layoutWrapperStyle = (): object => {
  return {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    height: '100%',
    minHeight: '100%',
  }
}

export const layoutContainerStyle = (arg?: { gridTemplateColumns: number, gridTemplateRows: number, }): object => {
  return {
    display: 'grid',
    height: '100%',
    minHeight: '100%',
    gridTemplateColumns: columnRepeat((arg?.gridTemplateColumns || 0)),
    gridTemplateRows: rowRepeat((arg?.gridTemplateRows || 0)),
  }
}