24 lines
689 B
TypeScript
24 lines
689 B
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
|
|
interface IIndicator {
|
|
state?: 'active' | 'pending' | 'error' | 'inactive'
|
|
size?: 'sm'
|
|
}
|
|
|
|
/** Indicator dot component. */
|
|
const Indicator: React.FC<IIndicator> = ({ state = 'inactive', size = 'sm' }) => {
|
|
return (
|
|
<div
|
|
className={clsx('rounded-full outline-double', {
|
|
'w-1.5 h-1.5 shadow-sm': size === 'sm',
|
|
'bg-green-500 outline-green-400': state === 'active',
|
|
'bg-yellow-500 outline-yellow-400': state === 'pending',
|
|
'bg-red-500 outline-red-400': state === 'error',
|
|
'bg-neutral-500 outline-neutral-400': state === 'inactive',
|
|
})}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Indicator;
|