import styled, { css } from "styled-components/macro"; export type IGaps = "none" | "small" | "medium" | "large" | "xlarge" | "huge"; interface FlexProps { direction?: React.CSSProperties["flexDirection"]; justify?: React.CSSProperties["justifyContent"]; align?: React.CSSProperties["alignItems"]; nowrap?: boolean; gap?: IGaps; } export const Flex = styled.div<FlexProps>( ({ gap = "none", direction, justify, align, nowrap }) => css` display: flex; flex-direction: ${direction}; justify-content: ${justify}; align-items: ${align}; flex-wrap: ${nowrap ? "no-wrap" : "wrap"}; & > *:not(:last-child) { ${direction === "column" ? css` margin-bottom: ${(p) => p.theme.space[gap]}px; ` : css` margin-right: ${(p) => p.theme.space[gap]}px; `} } ` ); export default Flex;