List Row

import styled from "styled-components";
export default function ListRow({
  children,
  className,
  style,
  padding,
  margin,
  width,
  height,
  reversed,
  display = "flex",
  justify = "center",
  align = "center",
  isWrap,
}) {
  return (
    <Styled
      className={className}
      style={style}
      $padding={padding}
      $margin={margin}
      $width={width}
      $height={height}
      $reversed={reversed}
      $justify={justify}
      $align={align}
      $isWrap={isWrap}
      $display={display}
    >
      {children}
    </Styled>
  );
}

const Styled = styled.div`
  display: ${({ $display }) => $display};
  flex-wrap: ${({ isWrap }) => (isWrap ? "wrap" : "nowrap")};
  flex-direction: ${({ reversed }) => (!reversed ? "row" : "row-reverse")};
  justify-content: ${({ justify }) => justify};
  align-items: ${({ align }) => align};
  width: ${({ width }) => width};
  height: ${({ height }) => height};
  padding: ${({ padding }) => padding};
  margin: ${({ margin }) => margin};
`;

import Box from "../../example/Box";
import ListRow from "../../layout/ListRow";

export default function TestView() {
  return (
    <div className="test-view">
      <ListRow>
        <Box
          width={"50px"}
          height={"50px"}
          marginRight={"10px"}
          backgroundColor={"var(--primary)"}
        />
        <Box
          width={"50px"}
          height={"50px"}
          marginRight={"10px"}
          backgroundColor={"var(--primary)"}
        />
        <Box
          width={"50px"}
          height={"50px"}
          marginRight={"10px"}
          backgroundColor={"var(--primary)"}
        />
        <Box
          width={"50px"}
          height={"50px"}
          marginRight={"10px"}
          backgroundColor={"var(--primary)"}
        />
      </ListRow>
    </div>
  );
}