mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-04-16 00:50:18 -04:00
37 lines
702 B
TypeScript
37 lines
702 B
TypeScript
import { CSSProperties, ReactNode, useMemo } from 'react';
|
|
|
|
const baseStyle: CSSProperties = {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: '#f9f9f9',
|
|
borderRadius: '0.5rem',
|
|
padding: '1rem',
|
|
marginBottom: '1em',
|
|
boxSizing: 'border-box',
|
|
};
|
|
|
|
export default function UISecondaryBox({
|
|
children,
|
|
style,
|
|
cancelClicks = true,
|
|
}: {
|
|
children: ReactNode;
|
|
style?: CSSProperties;
|
|
cancelClicks?: boolean;
|
|
}) {
|
|
const computedStyle = useMemo(() => {
|
|
if (!style) {
|
|
return baseStyle;
|
|
}
|
|
return { ...baseStyle, ...style };
|
|
}, [style]);
|
|
return (
|
|
<div
|
|
style={computedStyle}
|
|
{...(cancelClicks ? { onClick: (e) => e.stopPropagation() } : {})}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|