2025-09-05 12:16:17 +01:00
|
|
|
import { Box } from '@mantine/core';
|
2025-08-22 14:40:27 +01:00
|
|
|
import ToolButton from '../toolPicker/ToolButton';
|
|
|
|
|
import SubcategoryHeader from './SubcategoryHeader';
|
|
|
|
|
|
|
|
|
|
import { getSubcategoryLabel } from "../../../data/toolsTaxonomy";
|
|
|
|
|
import { TFunction } from 'i18next';
|
|
|
|
|
import { SubcategoryGroup } from '../../../hooks/useToolSections';
|
|
|
|
|
|
|
|
|
|
// Helper function to render tool buttons for a subcategory
|
|
|
|
|
export const renderToolButtons = (
|
|
|
|
|
t: TFunction,
|
|
|
|
|
subcategory: SubcategoryGroup,
|
|
|
|
|
selectedToolKey: string | null,
|
|
|
|
|
onSelect: (id: string) => void,
|
2025-09-05 17:12:52 +01:00
|
|
|
showSubcategoryHeader: boolean = true,
|
2025-09-25 16:32:30 +01:00
|
|
|
disableNavigation: boolean = false,
|
|
|
|
|
searchResults?: Array<{ item: [string, any]; matchedText?: string }>
|
|
|
|
|
) => {
|
|
|
|
|
// Create a map of matched text for quick lookup
|
|
|
|
|
const matchedTextMap = new Map<string, string>();
|
|
|
|
|
if (searchResults) {
|
|
|
|
|
searchResults.forEach(({ item: [id], matchedText }) => {
|
|
|
|
|
if (matchedText) matchedTextMap.set(id, matchedText);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Box key={subcategory.subcategoryId} w="100%">
|
|
|
|
|
{showSubcategoryHeader && (
|
|
|
|
|
<SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
|
|
|
|
|
)}
|
|
|
|
|
<div>
|
|
|
|
|
{subcategory.tools.map(({ id, tool }) => {
|
|
|
|
|
const matchedSynonym = matchedTextMap.get(id);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ToolButton
|
|
|
|
|
key={id}
|
|
|
|
|
id={id}
|
|
|
|
|
tool={tool}
|
|
|
|
|
isSelected={selectedToolKey === id}
|
|
|
|
|
onSelect={onSelect}
|
|
|
|
|
disableNavigation={disableNavigation}
|
|
|
|
|
matchedSynonym={matchedSynonym}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
</Box>
|
|
|
|
|
);
|
|
|
|
|
};
|