34 lines
942 B
TypeScript
34 lines
942 B
TypeScript
import type { ReactNode } from 'react';
|
|
import tw from 'twin.macro';
|
|
|
|
import Spinner, { SpinnerSize } from '@/components/elements/Spinner';
|
|
|
|
interface Props {
|
|
children?: ReactNode;
|
|
|
|
visible: boolean;
|
|
fixed?: boolean;
|
|
size?: SpinnerSize;
|
|
backgroundOpacity?: number;
|
|
}
|
|
|
|
function SpinnerOverlay({ size, fixed, visible, backgroundOpacity, children }: Props) {
|
|
if (!visible) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
css={[
|
|
tw`top-0 left-0 flex items-center justify-center w-full h-full rounded flex-col z-40`,
|
|
!fixed ? tw`absolute` : tw`fixed`,
|
|
]}
|
|
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>
|
|
);
|
|
}
|
|
|
|
export default SpinnerOverlay;
|