Add collapse expand of groups

src/components/HeroSection/HeroItemsGroup.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { cn } from '../../lib/classname';
 import { HeroTitle } from './HeroTitle';
 
@@ -23,15 +23,19 @@ export function HeroItemsGroup(props: HeroItemsGroupProps) {
     className,
   } = props;
 
-  const isCollapsed = isAllCollapsed || isLoading;
+  const [isCollapsed, setIsCollapsed] = useState(isLoading || isAllCollapsed);
+
+  useEffect(() => {
+    setIsCollapsed(isAllCollapsed || isLoading);
+  }, [isAllCollapsed, isLoading]);
 
   return (
     <div
       className={cn(
-        '',
+        'transition-all',
         {
-          'border-b border-b-slate-800/70 pb-5 pt-5': !isCollapsed,
+          'pb-2 pt-5': !isCollapsed,
-          'py-2': isCollapsed,
+          'py-1': isCollapsed,
         },
         className,
       )}
@@ -41,8 +45,11 @@ export function HeroItemsGroup(props: HeroItemsGroupProps) {
           icon={icon}
           isLoading={isLoading}
           title={title}
-          rightContent={!isCollapsed && rightContent}
+          rightContent={rightContent}
           isCollapsed={isCollapsed}
+          onToggleCollapse={() => {
+            setIsCollapsed(!isCollapsed);
+          }}
         />
         {!isCollapsed && (
           <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">

src/components/HeroSection/HeroTitle.tsx

@@ -9,6 +9,7 @@ type HeroTitleProps = {
   title: string | ReactNode;
   rightContent?: ReactNode;
   isCollapsed?: boolean;
+  onToggleCollapse?: () => void;
 };
 
 export function HeroTitle(props: HeroTitleProps) {
@@ -18,6 +19,7 @@ export function HeroTitle(props: HeroTitleProps) {
     icon,
     rightContent,
     isCollapsed = false,
+    onToggleCollapse,
   } = props;
 
   return (
@@ -32,6 +34,7 @@ export function HeroTitle(props: HeroTitleProps) {
         {title}
         {!isLoading && (
           <button
+            onClick={onToggleCollapse}
             className={cn(
               'ml-2 inline-flex items-center gap-1 rounded-md bg-slate-800 py-0.5 pl-1 pr-1.5 text-xs uppercase tracking-wider text-slate-400 hover:bg-slate-700',
               {
@@ -53,7 +56,7 @@ export function HeroTitle(props: HeroTitleProps) {
           </button>
         )}
       </p>
-      <div>{rightContent}</div>
+      <div>{isCollapsed && rightContent}</div>
     </div>
   );
 }