+ {/* Render Sub-Categories */}
+ {category.children && category.children.length > 0 && (
+
+ {category.children.map((subCategory, index) => (
+
+ ))}
+
+ )}
+ {/* Render Recommendations */}
+ {category.recommendations && category.recommendations.length > 0 && (
+
+ {category.recommendations.map((recommendation, index) => (
+
onRecommendationSelect(recommendation)}
+ className={`${selectedRecommendation && selectedRecommendation.id === recommendation.id ? 'selected-recommendation' : ''}`}
+ style={{
+ cursor: 'pointer',
+ }}
+ >
+ {selectedRecommendation && selectedRecommendation.title === recommendation.title ? "> " : ""}{recommendation.title}
+
+ ))}
+
+ )}
+
+ >
+ );
+}
+
+const DescriptionPanel = ({ recommendation }) => {
+ if (!recommendation) {
+ return Select a recommendation to see its details here.
;
+ }
+
+ return (
+ <>
+