misc_pterodactyl-panel/resources/scripts/components/elements/ContentBox.tsx

35 lines
1.1 KiB
TypeScript
Raw Normal View History

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>
);
2020-02-08 23:23:08 +00:00
export default ContentBox;