From 71c4a7d07216b392eba2c01e314b83304cc1f520 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 11 Feb 2025 00:28:04 +0000
Subject: [PATCH] Add collapse expand of groups
---
src/components/HeroSection/HeroItemsGroup.tsx | 19 +++++++++++++------
src/components/HeroSection/HeroTitle.tsx | 5 ++++-
2 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/src/components/HeroSection/HeroItemsGroup.tsx b/src/components/HeroSection/HeroItemsGroup.tsx
index d3c63ce6d..3bfa6c077 100644
--- a/src/components/HeroSection/HeroItemsGroup.tsx
+++ b/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,
- 'py-2': isCollapsed,
+ 'pb-2 pt-5': !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">
diff --git a/src/components/HeroSection/HeroTitle.tsx b/src/components/HeroSection/HeroTitle.tsx
index e0521d6fa..7d321177b 100644
--- a/src/components/HeroSection/HeroTitle.tsx
+++ b/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>
);
}