update grouping

Author: Douglasymlai

components/techstack/stackitem.tsx

@@ -33,9 +33,24 @@ export default function StackItem({
   showLogo = false,
   showText = true
 }: StackItemProps) {
-  // Construct the full logo path using the title as subdirectory
-  const titleLower = title ? title.toLowerCase().replace(/\s+/g, '-') : '';
-  const fullLogoPath = showLogo && id && titleLower ? `https://camel-ai.github.io/camel_asset/logos/${titleLower}/${id}.svg` : null;
+  // Map section titles to directory names
+  const getLogoPath = (sectionTitle: string) => {
+    const titleMap: { [key: string]: string } = {
+      'Models': 'models',
+      'Tools': 'tools',
+      'Storage': 'storage',
+      'Data Loaders': 'loaders',
+      'Interpreters': 'interpreters',
+      'Run Time': 'run-time',
+      'Human in the Loop': 'human-in-the-loop',
+      'Observe': 'observe'
+    };
+    return titleMap[sectionTitle] || sectionTitle.toLowerCase().replace(/\s+/g, '-');
+  };
+  
+  // Construct the full logo path using the mapped directory name
+  const logoDir = title ? getLogoPath(title) : '';
+  const fullLogoPath = showLogo && id && logoDir ? `https://camel-ai.github.io/camel_asset/logos/${logoDir}/${id}.svg` : null;
 
   // Special styling for logo-only items
   const isLogoOnly = showLogo && !showText;

components/techstack/stacksection.tsx

@@ -6,6 +6,7 @@ export interface StackItemData {
   name: string
   logo?: boolean
   showText?: boolean
+  subcategory?: string
   onClick?: () => void
 }
 
@@ -15,6 +16,7 @@ export interface StackSectionProps {
   items: StackItemData[]
   variant?: 'neon' | 'green' | 'yellow' | 'purple' | 'pink' | 'orange' | 'grey' | 'blue' | 'red' | 'bone'
   className?: string
+  grouped?: boolean
 }
 
 const backgroundColorVariants = {
@@ -43,13 +45,82 @@ const borderColorVariants = {
   bone: 'border-bone-700'
 }
 
+// Group items by subcategory
+const groupItemsBySubcategory = (items: StackItemData[]) => {
+  const groups: { [key: string]: StackItemData[] } = {};
+  
+  items.forEach(item => {
+    const subcategory = item.subcategory || 'Other';
+    if (!groups[subcategory]) {
+      groups[subcategory] = [];
+    }
+    groups[subcategory].push(item);
+  });
+  
+  return groups;
+};
+
 export default function StackSection({ 
   title, 
   subtitle, 
   items, 
   variant = 'neon',
-  className = ''
+  className = '',
+  grouped = false
 }: StackSectionProps) {
+  // If grouped is true, render grouped layout
+  if (grouped) {
+    const groupedItems = groupItemsBySubcategory(items);
+    const subcategories = Object.keys(groupedItems);
+    
+    return (
+      <div className={`flex flex-col lg:flex-row py-4 ${className}`}>
+        {/* Title Section */}
+        <div className={`lg:w-1/5 flex-shrink-0 pt-4 border-t ${borderColorVariants[variant]}`}>
+          <h3 className={`font-palatino text-2xl font-bold text-black-900 mb-2`}>
+            {title}
+          </h3>
+          {subtitle && (
+            <p className="text-black-700 text-sm font-palatino">
+              {subtitle}
+            </p>
+          )}
+        </div>
+        
+        {/* Grouped Items Layout */}
+        <div className="lg:w-4/5 flex-1">
+          <div className={`border border-white rounded-tr-xl backdrop-blur-sm rounded-b-xl p-4 ${backgroundColorVariants[variant]}`}>
+            {subcategories.map((subcategory, groupIndex) => (
+              <div key={subcategory} className={`${groupIndex > 0 ? 'mt-6 pt-6 border-t border-white/20' : ''}`}>
+                {/* Subcategory Title */}
+                <h4 className="font-palatino text-lg font-bold text-black-800 mb-3">
+                  {subcategory}
+                </h4>
+                {/* Items in this subcategory */}
+                <div className="flex flex-wrap gap-4">
+                  {groupedItems[subcategory].map((item) => (
+                    <StackItem
+                      key={item.id}
+                      variant={variant}
+                      onClick={item.onClick}
+                      id={item.id}
+                      title={title}
+                      showLogo={item.logo || false}
+                      showText={item.showText !== false}
+                    >
+                      {item.name}
+                    </StackItem>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Original non-grouped layout
   return (
     <div className={`flex flex-col lg:flex-row py-4 ${className}`}>
       {/* Title Section */}
@@ -94,6 +165,7 @@ export const createStackSection = (
     subtitle?: string
     variant?: StackSectionProps['variant']
     onItemClick?: (itemName: string, index: number) => void
+    grouped?: boolean
   }
 ): StackSectionProps => {
   const stackItems: StackItemData[] = items.map((item, index) => {
@@ -111,6 +183,7 @@ export const createStackSection = (
     title,
     subtitle: options?.subtitle,
     items: stackItems,
-    variant: options?.variant || 'neon'
+    variant: options?.variant || 'neon',
+    grouped: options?.grouped || false
   }
 }

techstack/techstack.tsx

@@ -35,6 +35,14 @@ function TechStackContent() {
     }))
   };
 
+  const storageData = {
+    ...storage,
+    items: storage.items.map(item => ({
+      ...item,
+      onClick: () => handleItemClick(item)
+    }))
+  };
+
 
   return (
     <div className="flex-1 w-full max-w-[1200px] mx-auto py-8">
@@ -79,9 +87,10 @@ function TechStackContent() {
         />
         {/* Storage Section */}
         <StackSection
-          title={storage.title}
-          items={storage.items}
-          variant={storage.variant as "orange"}
+          title={storageData.title}
+          items={storageData.items}
+          variant={storageData.variant as "orange"}
+          grouped={true}
         />
         {/* Data Loaders Section */}
         <StackSection