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

29 lines
957 B
TypeScript
Raw Normal View History

import React from 'react';
import Spinner, { SpinnerSize } from '@/components/elements/Spinner';
2020-07-04 19:39:55 +00:00
import Fade from '@/components/elements/Fade';
import tw from 'twin.macro';
interface Props {
visible: boolean;
fixed?: boolean;
size?: SpinnerSize;
backgroundOpacity?: number;
}
const SpinnerOverlay: React.FC<Props> = ({ size, fixed, visible, backgroundOpacity, children }) => (
2020-07-04 19:39:55 +00:00
<Fade timeout={150} in={visible} unmountOnExit>
<div
2020-07-04 19:39:55 +00:00
css={[
2021-07-24 17:43:00 +00:00
tw`top-0 left-0 flex items-center justify-center w-full h-full rounded flex-col z-40`,
2020-07-04 19:39:55 +00:00
!fixed ? tw`absolute` : tw`fixed`,
]}
2021-07-24 17:43:00 +00:00
style={{ background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }}
>
<Spinner size={size}/>
{children && (typeof children === 'string' ? <p css={tw`mt-4 text-neutral-400`}>{children}</p> : children)}
</div>
2020-07-04 19:39:55 +00:00
</Fade>
);
2020-02-08 23:23:08 +00:00
export default SpinnerOverlay;