8c52d6a275
- Add comprehensive TDD documentation to CLAUDE.md with coverage requirements and examples - Extract reusable UI components to frontend/src/components/ui/ (Modal, FormInput, Button, Alert, etc.) - Add shared constants (schedulePresets) and utility hooks (useCrudMutation, useFormValidation) - Update frontend/CLAUDE.md with component documentation and usage examples - Refactor CreateTaskModal to use shared components and constants - Fix test assertions to be more robust and accurate across all test files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
interface LoadingSpinnerProps {
|
|
/** Size of the spinner */
|
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
/** Color of the spinner */
|
|
color?: 'default' | 'white' | 'brand' | 'blue';
|
|
/** Optional label to display below spinner */
|
|
label?: string;
|
|
/** Center spinner in container */
|
|
centered?: boolean;
|
|
/** Additional class name */
|
|
className?: string;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
xs: 'h-3 w-3',
|
|
sm: 'h-4 w-4',
|
|
md: 'h-6 w-6',
|
|
lg: 'h-8 w-8',
|
|
xl: 'h-12 w-12',
|
|
};
|
|
|
|
const colorClasses = {
|
|
default: 'text-gray-500 dark:text-gray-400',
|
|
white: 'text-white',
|
|
brand: 'text-brand-600 dark:text-brand-400',
|
|
blue: 'text-blue-600 dark:text-blue-400',
|
|
};
|
|
|
|
export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
|
size = 'md',
|
|
color = 'default',
|
|
label,
|
|
centered = false,
|
|
className = '',
|
|
}) => {
|
|
const spinner = (
|
|
<div className={`flex flex-col items-center gap-2 ${className}`}>
|
|
<Loader2 className={`animate-spin ${sizeClasses[size]} ${colorClasses[color]}`} />
|
|
{label && (
|
|
<span className={`text-sm ${colorClasses[color]}`}>{label}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
if (centered) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
{spinner}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return spinner;
|
|
};
|
|
|
|
/** Full page loading state */
|
|
export const PageLoading: React.FC<{ label?: string }> = ({ label = 'Loading...' }) => (
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<LoadingSpinner size="lg" color="brand" label={label} />
|
|
</div>
|
|
);
|
|
|
|
/** Inline loading indicator */
|
|
export const InlineLoading: React.FC<{ label?: string }> = ({ label }) => (
|
|
<span className="inline-flex items-center gap-2">
|
|
<LoadingSpinner size="sm" />
|
|
{label && <span className="text-sm text-gray-500 dark:text-gray-400">{label}</span>}
|
|
</span>
|
|
);
|
|
|
|
export default LoadingSpinner;
|