34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import FlashMessageRender from '@/components/FlashMessageRender';
|
|
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
|
import tw from 'twin.macro';
|
|
|
|
type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
|
|
title?: string;
|
|
borderColor?: string;
|
|
showFlashes?: string | boolean;
|
|
showLoadingOverlay?: boolean;
|
|
}>;
|
|
|
|
const ContentBox = ({ title, borderColor, showFlashes, showLoadingOverlay, children, ...props }: Props) => (
|
|
<div {...props}>
|
|
{title && <h2 css={tw`text-neutral-300 mb-4 px-4 text-2xl`}>{title}</h2>}
|
|
{showFlashes &&
|
|
<FlashMessageRender
|
|
byKey={typeof showFlashes === 'string' ? showFlashes : undefined}
|
|
css={tw`mb-4`}
|
|
/>
|
|
}
|
|
<div
|
|
css={[
|
|
tw`bg-neutral-700 p-4 rounded shadow-lg relative`,
|
|
!!borderColor && tw`border-t-4`,
|
|
]}
|
|
>
|
|
<SpinnerOverlay visible={showLoadingOverlay || false}/>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default ContentBox;
|