lobe-chat

1
import { CSSProperties, ReactNode, memo } from 'react';
2
import { Flexbox } from 'react-layout-kit';
3

4
import { MAX_SIZE_DESKTOP, MIN_IMAGE_SIZE, useStyles } from './style';
5

6
interface GridProps {
7
  children: ReactNode;
8
  className?: string;
9
  col?: number;
10
  gap?: number;
11
  max?: number;
12
  min?: number;
13
  style?: CSSProperties;
14
}
15

16
const Grid = memo<GridProps>(
17
  ({
18
    gap = 4,
19
    col = 3,
20
    max = MAX_SIZE_DESKTOP,
21
    min = MIN_IMAGE_SIZE,
22
    children,
23
    className,
24
    style,
25
  }) => {
26
    const { styles, cx } = useStyles({ col, gap, max, min });
27

28
    return (
29
      <Flexbox className={cx(styles.container, className)} gap={gap} horizontal style={style}>
30
        {children}
31
      </Flexbox>
32
    );
33
  },
34
);
35

36
export default Grid;
37