wheelshare-frontend/src/components/UISecondaryBox.tsx
2021-07-02 23:16:56 -04:00

27 lines
539 B
TypeScript

import { CSSProperties, ReactNode, useMemo } from 'react';
const baseStyle: CSSProperties = {
display: 'flex',
flexDirection: 'column',
backgroundColor: '#f9f9f9',
borderRadius: '0.5rem',
padding: '1rem',
marginBottom: '1em',
};
export default function UISecondaryBox({
children,
style,
}: {
children: ReactNode;
style?: CSSProperties;
}) {
const computedStyle = useMemo(() => {
if (!style) {
return baseStyle;
}
return { ...baseStyle, ...style };
}, [style]);
return <div style={computedStyle}>{children}</div>;
}