53d96d2cb3
* refactor: ♻️ Flex type Change-Id: I9043fa71a94c6d691e075b983c263be39b5a4b9b * fix: 💄 eslint Change-Id: I2c41ea588b8152a354998ec69ae85798cd6f3ff4 * fix: 💄 lint Change-Id: I9467ca89b3a3c83dbfa0422869528e86db8d4fab
28 lines
740 B
TypeScript
28 lines
740 B
TypeScript
import { CSSProperties } from "react";
|
|
import styled from "styled-components";
|
|
|
|
type JustifyValues = CSSProperties["justifyContent"];
|
|
|
|
type AlignValues = CSSProperties["alignItems"];
|
|
|
|
const Flex = styled.div<{
|
|
auto?: boolean;
|
|
column?: boolean;
|
|
align?: AlignValues;
|
|
justify?: JustifyValues;
|
|
shrink?: boolean;
|
|
gap?: number;
|
|
}>`
|
|
display: flex;
|
|
flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
|
|
flex-direction: ${({ column }) => (column ? "column" : "row")};
|
|
align-items: ${({ align }) => align};
|
|
justify-content: ${({ justify }) => justify};
|
|
flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
|
|
gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
|
|
min-height: 0;
|
|
min-width: 0;
|
|
`;
|
|
|
|
export default Flex;
|