stack.tsx

import React, { ReactElement, ReactNode } from "react";
import styled, { css } from "styled-components";
import { theme } from "../../constants/theme";

type StackDirection = "row" | "column" | "row-reverse" | "column-reverse";

interface StackProps {
  space?: number;
  direction?: StackDirection;
  children: ReactNode;
}

const StyledStack = styled.div<StackProps>`
  display: flex;
  flex-direction: ${(p) => p.direction};

  /* Lobotomized owl selector  */
  /* https://css-tricks.com/lobotomized-owls/ */
  & > * + * {
    ${(p) =>
      p.direction === "row" || p.direction === "row-reverse"
        ? css`
            margin-left: ${theme.space(p.space)};
          }
        `
        : null}

    ${(p) =>
      p.direction === "column" || p.direction === "column-reverse"
        ? css`
            margin-top: ${theme.space(p.space)};
          `
        : null}
  }
`;

/**
 * Stack component for displaying a list or row of items with space between each based on the theme space.
 * Very naive, doesn't handle grids of items or wrapping.
 *
 * Inspired by https://tailwindcss.com/docs/space#app
 * and https://polaris.shopify.com/components/structure/stack
 */
export function Stack({
  direction = "row",
  space = 1,
  children,
}: StackProps): ReactElement {
  return (
    <StyledStack direction={direction} space={space}>
      {children}
    </StyledStack>
  );
}