mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-24 05:09:29 +00:00
7d9c0b0298
# Description of Changes Because we used string typing for IDs and names, it was really easy to make mistakes where variables named like `subcategory` would be stored as an ID in one file, but then read assuming it's a name in another file. This PR changes the code to consistently use enum cases when referring to IDs of categories, subcategories, and tools (at least in as many places as I can find them, ~I had to add a `ToolId` enum for this work~ I originally added a `ToolId` type for this work, but it caused too many issues when merging with #4222 so I've pulled it back out for now). Making that change made it obvious where we were inconsistently passing IDs and reading them as names etc. allowing me to fix rendering issues in the All Tools pane, where the subcategory IDs were being rendered directly (instead of being translated) or where IDs were being translated into names, but were then being re-translated, causing warnings in the log.
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Stack, Text, Divider, Card, Group } from '@mantine/core';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useSuggestedTools } from '../../../hooks/useSuggestedTools';
|
|
export interface SuggestedToolsSectionProps {}
|
|
|
|
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 (
|
|
<Card
|
|
key={tool.id}
|
|
p="sm"
|
|
withBorder
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={tool.navigate}
|
|
>
|
|
<Group gap="xs">
|
|
<IconComponent fontSize="small" />
|
|
<Text size="sm" fw={500}>
|
|
{tool.title}
|
|
</Text>
|
|
</Group>
|
|
</Card>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|