mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-07-09 12:54:47 +08:00
3398dac906
### What problem does this PR solve? Fix: Optimize styling and add a search settings loading state #3221 - Updated the calendar component's background color to use a variable - Modified the Spin component's styling to use the primary text color instead of black - Added a form submission loading state to the search settings component - Optimized the search settings form, unifying the styles of the model selection and input fields ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue) --------- Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
import React from 'react';
|
|
|
|
interface SpinProps {
|
|
spinning?: boolean;
|
|
size?: 'small' | 'default' | 'large';
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
small: 'w-4 h-4',
|
|
default: 'w-6 h-6',
|
|
large: 'w-8 h-8',
|
|
};
|
|
|
|
export const Spin: React.FC<SpinProps> = ({
|
|
spinning = true,
|
|
size = 'default',
|
|
className,
|
|
children,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'relative',
|
|
{
|
|
'after:content-[""] after:absolute after:inset-0 after:z-10 after:bg-text-primary/40 after:transition-all after:duration-300 h-full w-full':
|
|
spinning,
|
|
},
|
|
className,
|
|
)}
|
|
>
|
|
{spinning && (
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center bg-text-primary/30 ">
|
|
<div
|
|
className={cn(
|
|
'rounded-full border-muted-foreground border-2 border-t-transparent animate-spin',
|
|
sizeClasses[size],
|
|
)}
|
|
></div>
|
|
</div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|