Add disabled state to CircularButton and toolkit buttons

dirreno · dirreno · commit 67b35a8e0708 · 2025-11-17T00:17:59.000-03:00
Introduces a 'disabled' prop to CircularButton for visual and interaction changes. Updates installation and trainings pages to use a disabledMap for toggling button availability, refactors button rendering to a map, and adjusts trainings page text for clarity.
diff --git a/app/installation/page.tsx b/app/installation/page.tsx
@@ -138,6 +138,14 @@ function InstallationContent({ section, type }: InstallationContentProps) {
 export default function Page() {
   const [activeSection, setActiveSection] = useState<Section | null>(null);
   const [activeInstallType, setActiveInstallType] = useState<'coder' | 'noncoder' | null>(null);
+  // Toggle buttons by editing this map in code. Set true to disable, false to enable.
+  const disabledMap: Record<Section, boolean> = {
+    data4health: false,
+    clim4health: false,
+    land4health: false,
+    socio4health: false,
+    cube4health: false,
+  };
 
   const handleToolkitClick = (section: Section) => {
     if (section === activeSection) {
@@ -161,41 +169,27 @@ export default function Page() {
       </p>
       
       <div className="mb-8 mt-6 flex flex-wrap justify-center gap-8">
-        <CircularButton
-          icon={D4H_LOGO}
-          label="data4Health"
-          onClick={() => handleToolkitClick('data4health')}
-          isImage={true}
-          isActive={activeSection === 'data4health'}
-        />
-        <CircularButton
-          icon={C4H_LOGO}
-          label="clim4health"
-          onClick={() => handleToolkitClick('clim4health')}
-          isImage={true}
-          isActive={activeSection === 'clim4health'}
-        />
-        <CircularButton
-          icon={L4H_LOGO}
-          label="land4health"
-          onClick={() => handleToolkitClick('land4health')}
-          isImage={true}
-          isActive={activeSection === 'land4health'}
-        />
-        <CircularButton
-          icon={S4H_LOGO}
-          label="socio4health"
-          onClick={() => handleToolkitClick('socio4health')}
-          isImage={true}
-          isActive={activeSection === 'socio4health'}
-        />
-        <CircularButton
-          icon={CU4H_LOGO}
-          label="cube4health"
-          onClick={() => handleToolkitClick('cube4health')}
-          isImage={true}
-          isActive={false}
-        />
+        {[
+          { key: 'data4health', logo: D4H_LOGO, label: 'data4Health' },
+          { key: 'clim4health', logo: C4H_LOGO, label: 'clim4health' },
+          { key: 'land4health', logo: L4H_LOGO, label: 'land4health' },
+          { key: 'socio4health', logo: S4H_LOGO, label: 'socio4health' },
+          { key: 'cube4health', logo: CU4H_LOGO, label: 'cube4health' },
+        ].map((tk) => {
+          const section = tk.key as Section;
+          return (
+            <div key={tk.key} className="flex flex-col items-center">
+              <CircularButton
+                icon={tk.logo}
+                label={tk.label}
+                onClick={() => handleToolkitClick(section)}
+                isImage={true}
+                isActive={activeSection === section}
+                disabled={disabledMap[section]}
+              />
+            </div>
+          );
+        })}
       </div>
 
       {activeSection && (
diff --git a/app/trainings/page.tsx b/app/trainings/page.tsx
@@ -67,8 +67,6 @@ function SubButtons({ section }: { section: Section }) {
 
   return (
     <article className="prose mx-auto mt-8 w-full max-w-4xl">
-      <h2 className="text-2xl font-semibold">Installation & resources</h2>
-      <p className="text-gray-600">Embedded installation guide and related materials for <strong>{section}</strong>.</p>
 
       {entry?.pdf ? (
         <div className="mt-6 border rounded overflow-hidden" style={{ height: 720 }}>
@@ -116,6 +114,14 @@ function SubButtons({ section }: { section: Section }) {
 
 export default function Page() {
   const [activeSection, setActiveSection] = useState<Section | null>(null);
+  // Toggle buttons by editing this map in code. Set true to disable, false to enable.
+  const disabledMap: Record<Section, boolean> = {
+    data4health: false,
+    clim4health: true,
+    land4health: true,
+    socio4health: true,
+    cube4health: true,
+  };
 
   const handleToolkitClick = (section: Section) => {
     if (section === activeSection) {
@@ -127,48 +133,33 @@ export default function Page() {
 
   return (
     <div className="container mx-auto px-4">
-      <h1 className="mb-2 mt-6 text-3xl font-semibold md:mt-0">Installation</h1>
+      <h1 className="mb-2 mt-6 text-3xl font-semibold md:mt-0">Trainings</h1>
       <p className="text-justify text-l text-gray-500">
-        Before using our toolkits, ensure you have the necessary software and packages installed.
-        Select a toolkit below to view the installation guide and related materials.
+        This section contains the workshop development support materials.
       </p>
       
       <div className="mb-8 mt-6 flex flex-wrap justify-center gap-8">
-        <CircularButton
-          icon={D4H_LOGO}
-          label="data4Health"
-          onClick={() => handleToolkitClick('data4health')}
-          isImage={true}
-          isActive={activeSection === 'data4health'}
-        />
-        <CircularButton
-          icon={C4H_LOGO}
-          label="clim4health"
-          onClick={() => handleToolkitClick('clim4health')}
-          isImage={true}
-          isActive={activeSection === 'clim4health'}
-        />
-        <CircularButton
-          icon={L4H_LOGO}
-          label="land4health"
-          onClick={() => handleToolkitClick('land4health')}
-          isImage={true}
-          isActive={activeSection === 'land4health'}
-        />
-        <CircularButton
-          icon={S4H_LOGO}
-          label="socio4health"
-          onClick={() => handleToolkitClick('socio4health')}
-          isImage={true}
-          isActive={activeSection === 'socio4health'}
-        />
-        <CircularButton
-          icon={CU4H_LOGO}
-          label="cube4health"
-          onClick={() => handleToolkitClick('cube4health')}
-          isImage={true}
-          isActive={activeSection === 'cube4health'}
-        />
+        {[
+          { key: 'data4health', logo: D4H_LOGO, label: 'data4Health' },
+          { key: 'clim4health', logo: C4H_LOGO, label: 'clim4health' },
+          { key: 'land4health', logo: L4H_LOGO, label: 'land4health' },
+          { key: 'socio4health', logo: S4H_LOGO, label: 'socio4health' },
+          { key: 'cube4health', logo: CU4H_LOGO, label: 'cube4health' },
+        ].map((tk) => {
+          const section = tk.key as Section;
+          return (
+            <div key={tk.key} className="flex flex-col items-center">
+              <CircularButton
+                icon={tk.logo}
+                label={tk.label}
+                onClick={() => handleToolkitClick(section)}
+                isImage={true}
+                isActive={activeSection === section}
+                disabled={disabledMap[section]}
+              />
+            </div>
+          );
+        })}
       </div>
 
       {activeSection && (
diff --git a/app/ui/components/circular-button.tsx b/app/ui/components/circular-button.tsx
@@ -7,51 +7,57 @@ export interface CircularButtonProps {
   onClick: () => void;
   isImage?: boolean;
   isActive?: boolean;
+  disabled?: boolean;
   size?: 'sm' | 'md';
 }
 
-export default function CircularButton({ icon, label, onClick, isImage = false, isActive = false }: CircularButtonProps) {
+export default function CircularButton({ icon, label, onClick, isImage = false, isActive = false, disabled = false }: CircularButtonProps) {
   const Icon = icon as React.ElementType;
+  // stronger fade when disabled and remove hover effects
+  const containerClasses = `transform transition-all duration-300 ease-in-out rounded-full p-4 w-24 h-24 flex items-center justify-center ${
+    disabled ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:scale-110 hover:shadow-lg'
+  }`;
+
+  const activeBg = isActive ? 'bg-purple-100 shadow-lg scale-105 rotate-3' : (disabled ? '' : 'hover:bg-purple-50 hover:rotate-3');
+
   return (
     <div className="flex flex-col items-center space-y-2 group">
       <div
         role="button"
-        tabIndex={0}
-        onClick={onClick}
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
+        onClick={() => {
+          if (!disabled) onClick();
+        }}
         onKeyDown={(e) => {
+          if (disabled) return;
           if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             onClick();
           }
         }}
-        className={`cursor-pointer transform transition-all duration-300 ease-in-out hover:scale-110 hover:shadow-lg rounded-full p-4 w-24 h-24 flex items-center justify-center
-          ${isActive 
-            ? 'bg-purple-100 shadow-lg scale-105 rotate-3' 
-            : 'hover:bg-purple-50 hover:rotate-3'}`}
+        className={`${containerClasses} ${activeBg}`}
       >
         {isImage ? (
           <Image 
             src={icon as string} 
             alt={label}
             width={80}
             height={80}
-            className={`text-current transform transition-transform duration-300 
-              ${isActive ? '-rotate-3' : 'group-hover:-rotate-3'}`}
+            className={`text-current transform transition-transform duration-300 ${disabled ? 'filter grayscale' : ''} ${isActive ? '-rotate-3' : (disabled ? '' : 'group-hover:-rotate-3')}`}
           />
         ) : (
           typeof icon === 'string' ? (
-            <span className={`text-2xl transition-all duration-300 ${isActive ? 'text-purple-700' : 'text-dark-purple group-hover:text-purple-700'}`}>
+            <span className={`text-2xl transition-all duration-300 ${isActive ? 'text-purple-700' : 'text-dark-purple'} ${disabled ? 'text-gray-400' : 'group-hover:text-purple-700'}`}>
               {icon}
             </span>
           ) : (
-            <Icon className={`h-12 w-12 transition-all duration-300 
-              ${isActive ? 'text-purple-700' : 'text-dark-purple group-hover:text-purple-700'}`} 
+            <Icon className={`h-12 w-12 transition-all duration-300 ${isActive ? 'text-purple-700' : 'text-dark-purple'} ${disabled ? 'filter grayscale text-gray-400' : 'group-hover:text-purple-700'}`} 
             />
           )
         )}
       </div>
-      <span className={`text-sm font-medium transition-all duration-300 
-        ${isActive ? 'text-purple-700' : 'group-hover:text-purple-700'}`}>
+      <span className={`text-sm font-medium transition-all duration-300 ${isActive ? 'text-purple-700' : (disabled ? 'text-gray-400' : 'group-hover:text-purple-700')}`}>
         {label}
       </span>
     </div>
