mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-09-24 04:26:14 +00:00
1898df0df9
# Description of Changes <!-- Please provide a summary of the changes, including: - What was changed - Why the change was made - Any challenges encountered Closes #(issue_number) --> --- ## 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. --------- Co-authored-by: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Stack, Text, Divider, Card, Group, Anchor } from '@mantine/core';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useSuggestedTools } from '../../../hooks/useSuggestedTools';
|
|
|
|
export function SuggestedToolsSection(): React.ReactElement {
|
|
const { t } = useTranslation();
|
|
const suggestedTools = useSuggestedTools();
|
|
|
|
return (
|
|
<Stack gap="md">
|
|
<Divider />
|
|
|
|
<Text size="lg" fw={600}>
|
|
{t('editYourNewFiles', 'Edit your new file(s)')}
|
|
</Text>
|
|
|
|
<Stack gap="xs">
|
|
{suggestedTools.map((tool) => {
|
|
const IconComponent = tool.icon;
|
|
return (
|
|
<Anchor
|
|
key={tool.id}
|
|
href={tool.href}
|
|
onClick={tool.onClick}
|
|
style={{ textDecoration: 'none', color: 'inherit' }}
|
|
>
|
|
<Card
|
|
p="sm"
|
|
withBorder
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<Group gap="xs">
|
|
<IconComponent fontSize="small" />
|
|
<Text size="sm" fw={500}>
|
|
{tool.title}
|
|
</Text>
|
|
</Group>
|
|
</Card>
|
|
</Anchor>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|