import { Expander, ExpanderItem } from '@aws-amplify/ui-react'; import { Properties, Category } from '../../../scripts/types/catalog'; import { PropsTable } from './PropsTable'; type CategoryProperty = { [key in Category]: Properties }; type SortedPropertiesByCategory = { [key: string]: Properties }[]; export function PropsTableExpander({ propsSortedByCategory, }: { propsSortedByCategory: SortedPropertiesByCategory; }) { const expanderItem = (categoryProperty: CategoryProperty): JSX.Element => { const title = Object.keys(categoryProperty)[0]; return ( <ExpanderItem key={title} title={title} value={title}> <PropsTable properties={categoryProperty[title]} /> </ExpanderItem> ); }; return ( <Expander type="multiple" className="props-table-expander"> {propsSortedByCategory.map(expanderItem)} </Expander> ); }