portainer/app/react/components/InlineLoader/InlineLoader.tsx

38 lines
681 B
TypeScript

import { Loader2 } from 'lucide-react';
import { PropsWithChildren } from 'react';
import clsx from 'clsx';
import { Icon } from '@@/Icon';
type Size = 'xs' | 'sm' | 'md';
export type Props = {
className?: string;
size?: Size;
};
const sizeStyles: Record<Size, string> = {
xs: 'text-xs',
sm: 'text-sm',
md: 'text-md',
};
export function InlineLoader({
children,
className,
size = 'sm',
}: PropsWithChildren<Props>) {
return (
<div
className={clsx(
'text-muted flex items-center gap-2',
className,
sizeStyles[size]
)}
>
<Icon icon={Loader2} className="animate-spin-slow" />
{children}
</div>
);
}