51 lines
1.0 KiB
TypeScript
51 lines
1.0 KiB
TypeScript
import { useAppState } from '@/state/AppState';
|
|
import clsx from 'clsx/lite';
|
|
import { FaCircle } from 'react-icons/fa6';
|
|
|
|
export default function InsightsIndicatorDot({
|
|
className,
|
|
size = 'medium',
|
|
colorOverride,
|
|
top,
|
|
right,
|
|
bottom,
|
|
left,
|
|
}: {
|
|
className?: string
|
|
size?: 'small' | 'medium' | 'large'
|
|
colorOverride?: 'blue' | 'yellow'
|
|
top?: number
|
|
right?: number
|
|
bottom?: number
|
|
left?: number
|
|
}) {
|
|
const { insightsIndicatorStatus } = useAppState();
|
|
|
|
const getSize = () => {
|
|
switch (size) {
|
|
case 'small': return 6;
|
|
case 'medium': return 7;
|
|
case 'large': return 8;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<FaCircle
|
|
size={getSize()}
|
|
className={clsx(
|
|
(
|
|
top !== undefined ||
|
|
right !== undefined ||
|
|
bottom !== undefined ||
|
|
left !== undefined
|
|
) && 'absolute',
|
|
(colorOverride ?? insightsIndicatorStatus) === 'blue'
|
|
? 'text-blue-500'
|
|
: 'text-amber-500',
|
|
className,
|
|
)}
|
|
style={{ top, right, bottom, left }}
|
|
/>
|
|
);
|
|
}
|