mirror of https://github.com/buster-so/buster.git
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { RadioChecked, Radio, CircleWarning } from '../icons';
|
|
import { cn } from '@/lib/classMerge';
|
|
|
|
const animationConfig = {
|
|
initial: { opacity: 0 },
|
|
animate: { opacity: 1 },
|
|
exit: { opacity: 0 },
|
|
transition: { duration: 0.2 }
|
|
};
|
|
|
|
export const StatusIndicator: React.FC<{ status?: 'completed' | 'loading' | 'failed' }> =
|
|
React.memo(({ status }) => {
|
|
const inProgress = status === 'loading';
|
|
const failed = status === 'failed';
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'text-gray-light relative flex h-[11px] w-[11px] items-center justify-center rounded-full transition-all duration-200',
|
|
inProgress && 'text-primary',
|
|
failed && 'text-danger-foreground'
|
|
)}>
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
{...animationConfig}
|
|
key={status}
|
|
className={cn(
|
|
'ml-[0.5px] flex items-center justify-center transition-all duration-300'
|
|
)}>
|
|
{failed ? <CircleWarning /> : <RadioChecked />}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
StatusIndicator.displayName = 'StatusIndicator';
|