mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-15 02:54:06 +02:00
EthanHealy01andGitHub
9861332040
# Description of Changes - added tooltips to ocr and compress - added the tooltip component which can be used either directly, or through the toolstep component --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details.
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import styles from './Tooltip.module.css';
|
|
|
|
export interface TooltipTip {
|
|
title?: string;
|
|
description?: string;
|
|
bullets?: string[];
|
|
body?: React.ReactNode;
|
|
}
|
|
|
|
interface TooltipContentProps {
|
|
content?: React.ReactNode;
|
|
tips?: TooltipTip[];
|
|
}
|
|
|
|
export const TooltipContent: React.FC<TooltipContentProps> = ({
|
|
content,
|
|
tips,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`${styles['tooltip-body']}`}
|
|
style={{
|
|
color: 'var(--text-primary)',
|
|
padding: '16px',
|
|
fontSize: '14px',
|
|
lineHeight: '1.6'
|
|
}}
|
|
>
|
|
<div style={{ color: 'var(--text-primary)' }}>
|
|
{tips ? (
|
|
<>
|
|
{tips.map((tip, index) => (
|
|
<div key={index} style={{ marginBottom: index < tips.length - 1 ? '24px' : '0' }}>
|
|
{tip.title && (
|
|
<div style={{
|
|
display: 'inline-block',
|
|
backgroundColor: 'var(--tooltip-title-bg)',
|
|
color: 'var(--tooltip-title-color)',
|
|
padding: '6px 12px',
|
|
borderRadius: '16px',
|
|
fontSize: '12px',
|
|
fontWeight: '600',
|
|
marginBottom: '12px'
|
|
}}>
|
|
{tip.title}
|
|
</div>
|
|
)}
|
|
{tip.description && (
|
|
<p style={{ margin: '0 0 12px 0', color: 'var(--text-secondary)', fontSize: '13px' }} dangerouslySetInnerHTML={{ __html: tip.description }} />
|
|
)}
|
|
{tip.bullets && tip.bullets.length > 0 && (
|
|
<ul style={{ margin: '0', paddingLeft: '16px', color: 'var(--text-secondary)', fontSize: '13px' }}>
|
|
{tip.bullets.map((bullet, bulletIndex) => (
|
|
<li key={bulletIndex} style={{ marginBottom: '6px' }} dangerouslySetInnerHTML={{ __html: bullet }} />
|
|
))}
|
|
</ul>
|
|
)}
|
|
{tip.body && (
|
|
<div style={{ marginTop: '12px' }}>
|
|
{tip.body}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
{content && (
|
|
<div style={{ marginTop: '24px' }}>
|
|
{content}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
content
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|