51 lines
1.0 KiB
TypeScript
51 lines
1.0 KiB
TypeScript
import styled from "@emotion/styled";
|
|
import React from "react";
|
|
|
|
import Divider from "./Divider";
|
|
|
|
type SpaceProps = {
|
|
spacing?: number;
|
|
};
|
|
|
|
const shouldForwardProp = (prop: string) =>
|
|
prop !== "spacing" && prop !== "inline";
|
|
|
|
const Root = styled("div")({
|
|
width: "100%",
|
|
});
|
|
|
|
type SpacerProps = SpaceProps & {
|
|
/**
|
|
* Displays the dividing line
|
|
*/
|
|
withDivider?: boolean;
|
|
};
|
|
|
|
const Space = styled("div", { shouldForwardProp })<SpaceProps>(
|
|
({ spacing, theme }) => ({
|
|
width: "100%",
|
|
height: theme.spacing(spacing === undefined ? 1 : spacing),
|
|
}),
|
|
);
|
|
|
|
const Spacer: React.FC<SpacerProps> = (props) => {
|
|
const { spacing, withDivider } = props;
|
|
|
|
if (!withDivider) {
|
|
const spaceSize = spacing === undefined ? 2 : spacing;
|
|
return <Space spacing={spaceSize} />;
|
|
}
|
|
|
|
const spaceSize = spacing === undefined ? 1 : spacing;
|
|
|
|
return (
|
|
<Root>
|
|
<Space spacing={spaceSize} />
|
|
{withDivider && <Divider />}
|
|
<Space spacing={spaceSize} />
|
|
</Root>
|
|
);
|
|
};
|
|
|
|
export default Spacer;
|