Cacher is the code snippet organizer for pro developers

import React from "react";
import styled, { css } from "styled-components";

export enum Orientation {
  HORIZONTAL = "horizontal",
  VERTICAL = "vertical"
}

export interface StackProps {
  children: any;
  orientation?: Orientation;
  childrenGap: string;
}

const StyledStack =
  styled.div <
  { orientation: Orientation, gap: string } >
  `
  display: flex;

  ${props =>
    props.orientation == Orientation.HORIZONTAL &&
    css`
		flex-direction:column;
		> * {
			margin-top: ${props.gap}px;
			margin-bottom: ${props.gap}px;
		}
		> *:first-child { margin-top:0; }
		> *:last-child { margin-bottom:0; }
	`};

  ${props =>
    props.orientation == Orientation.VERTICAL &&
    css`
		flex-direction:row;
		> * {
			margin-left: ${props.gap}px;
			margin-right: ${props.gap}px;
		}
		> *:first-child { margin-left:0; }
		> *:last-child { margin-right:0; }
  `};
`;

export const Stack = (props: any) => {
  let { childrenGap, orientation } = props;
  return (
    <StyledStack
      gap={childrenGap}
      orientation={orientation || Orientation.HORIZONTAL}
      {...props}
    >
      {props.children}
    </StyledStack>
  );
};