ConceptPortal-public/rsconcept/frontend/src/components/man/BadgeHelp.tsx

38 lines
1.2 KiB
TypeScript
Raw Normal View History

import TextURL from '@/components/ui/TextURL';
import Tooltip, { PlacesType } from '@/components/ui/Tooltip';
2024-04-01 19:07:20 +03:00
import { useConceptOptions } from '@/context/OptionsContext';
2023-12-26 14:23:51 +03:00
import { HelpTopic } from '@/models/miscellaneous';
import { IconHelp } from '../Icons';
2024-03-20 15:27:32 +03:00
import InfoTopic from '../info/InfoTopic';
import { CProps } from '../props';
2024-04-01 19:07:20 +03:00
interface BadgeHelpProps extends CProps.Styling {
2023-12-28 14:04:44 +03:00
topic: HelpTopic;
offset?: number;
place?: PlacesType;
}
2024-04-01 19:07:20 +03:00
function BadgeHelp({ topic, ...restProps }: BadgeHelpProps) {
const { showHelp } = useConceptOptions();
if (!showHelp) {
return null;
}
return (
2023-12-28 14:04:44 +03:00
<div id={`help-${topic}`} className='p-1'>
<IconHelp size='1.25rem' className='icon-primary' />
<Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modal-tooltip' {...restProps}>
<div className='relative' onClick={event => event.stopPropagation()}>
2024-02-22 11:35:27 +03:00
<div className='absolute right-0 text-sm top-[0.4rem] clr-input'>
2023-12-28 14:04:44 +03:00
<TextURL text='Справка...' href={`/manuals?topic=${topic}`} />
</div>
</div>
<InfoTopic topic={topic} />
</Tooltip>
2023-12-28 14:04:44 +03:00
</div>
);
}
2024-04-01 19:07:20 +03:00
export default BadgeHelp;