List Column

import styled from "styled-components";
export default function ListColumn({
  children,
  className,
  style,
  padding,
  margin,
  reversed,
  justify = "center",
  align = "center",
  isWrap,
  width,
  height,
  display = "flex",
}) {
  return (
    <Styled
      className={className}
      style={style}
      $padding={padding}
      $margin={margin}
      $reversed={reversed}
      $justify={justify}
      $align={align}
      $isWrap={isWrap}
      $width={width}
      $height={height}
      $display={display}
    >
      {children}
    </Styled>
  );
}
const Styled = styled.div`
  display: ${({ $display }) => $display};
  flex-wrap: ${({ $isWrap }) => ($isWrap ? "wrap" : "nowrap")};
  flex-direction: ${({ $reversed }) =>
    !$reversed ? "column" : "column-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 ListColumnfrom "../../layout/ListColumn";

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