List Grid

import styled from "styled-components";

export default function ListGrid({
  children,
  style,
  className,
  itemWidth = "150px",
  gapX = "20px",
  gapY = "20px",
  backgroundColor,
  padding,
  margin,
  width,
  height,
  borderRadius,
  borderColor,
  borderWidth,
  align = "start",
}) {
  return (
    <Styled
      className={className}
      style={style}
      itemWidth={itemWidth}
      gapX={gapX}
      gapY={gapY}
      padding={padding}
      margin={margin}
      width={width}
      height={height}
      borderColor={borderColor}
      borderWidth={borderWidth}
      borderRadius={borderRadius}
      backgroundColor={backgroundColor}
      align={align}
    >
      {children}
    </Styled>
  );
}

const Styled = styled.div`
  display: grid;
  grid-gap: ${({ gapY }) => gapY} ${({ gapX }) => gapX};
  grid-template-columns: repeat(
    auto-fit,
    minmax(${({ itemWidth }) => itemWidth}, 1fr)
  );
  color: ${({ fontColor }) => fontColor};
  background-color: ${({ backgroundColor }) => backgroundColor};
  width: ${({ width }) => width};
  height: ${({ height }) => height};
  padding: ${({ padding }) => padding};
  margin: ${({ margin }) => margin};
  border-width: ${({ borderWidth }) => (borderWidth ? borderWidth : 0)};
  border-color: ${({ borderColor }) => borderColor};
  border-style: ${({ borderWidth }) => (borderWidth ? "solid" : null)};
  border-radius: ${({ borderRadius }) => borderRadius};
  align-content: ${({ align }) => align};
`;

import Box from "../../example/Box";
import ListGrid from "../../example/ListGrid";

export default function TestView() {
  return (
    <div className="test-view">
      <ListGrid itemWidth="30px">
        <Box padding={"30px"} backgroundColor={"var(--primary)"} />
        <Box padding={"30px"} backgroundColor={"var(--primary)"} />
        <Box padding={"30px"} backgroundColor={"var(--primary)"} />
        <Box padding={"30px"} backgroundColor={"var(--primary)"} />
        <Box padding={"30px"} backgroundColor={"var(--primary)"} />
        <Box padding={"30px"} backgroundColor={"var(--primary)"} />
        <Box padding={"30px"} backgroundColor={"var(--primary)"} />
        <Box padding={"30px"} backgroundColor={"var(--primary)"} />
        <Box padding={"30px"} backgroundColor={"var(--primary)"} />
      </ListGrid>
    </div>
  );
}