♻️ refactor: add disabled button example page

packages/frontend/src/pages/components/index.tsx

@@ -10,6 +10,7 @@ import { renderBadges } from './renders/badge';
 import {
   renderButtonIcons,
   renderButtons,
+  renderDisabledButtons,
   renderLinks,
 } from './renders/button';
 import {
@@ -53,6 +54,27 @@ const Page = () => {
             {renderButtonIcons()}
           </div>
 
+          {/* Link */}
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Link</h1>
+            <div className="flex gap-4 items-center justify-center">
+              {renderLinks()}
+            </div>
+          </div>
+
+          {/* Disabled button, icon only, and link */}
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <div className="flex flex-col gap-2">
+              <h1 className="text-2xl font-bold text-center">Disabled</h1>
+              <p className="text-lg text-center text-gray-500">
+                Button – icon only – link
+              </p>
+            </div>
+            <div className="flex gap-10 items-center justify-center">
+              {renderDisabledButtons()}
+            </div>
+          </div>
+
           <div className="w-full h border border-gray-200 px-20 my-10" />
 
           {/* Badge */}
@@ -139,16 +161,6 @@ const Page = () => {
               {renderInlineNotificationWithDescriptions()}
             </div>
           </div>
-
-          <div className="w-full h border border-gray-200 px-20 my-10" />
-
-          {/* Link */}
-          <div className="flex flex-col gap-10 items-center justify-between">
-            <h1 className="text-2xl font-bold">Link</h1>
-            <div className="flex gap-4 items-center justify-center">
-              {renderLinks()}
-            </div>
-          </div>
         </div>
       </div>
     </div>

packages/frontend/src/pages/components/renders/button.tsx

@@ -2,44 +2,45 @@ import { Button, ButtonTheme } from 'components/shared/Button';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import React from 'react';
 
+const buttonVariants = ['primary', 'secondary', 'tertiary', 'danger'] as const;
+const buttonSizes = ['lg', 'md', 'sm', 'xs'] as const;
+const iconOnlyVariants = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'ghost',
+  'danger',
+  'danger-ghost',
+] as const;
+const linkVariants = ['link', 'link-emphasized'] as const;
+
 export const renderButtons = () => {
-  return ['primary', 'secondary', 'tertiary', 'danger'].map(
+  return buttonVariants.map((variant, index) => (
-    (variant, index) => (
+    <div className="flex gap-5 flex-wrap" key={index}>
-      <div className="flex gap-5 flex-wrap" key={index}>
+      {buttonSizes.map((size) => (
-        {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => (
+        <Button
-          <Button
+          leftIcon={<PlusIcon />}
-            leftIcon={<PlusIcon />}
+          rightIcon={<PlusIcon />}
-            rightIcon={<PlusIcon />}
+          variant={variant as ButtonTheme['variant']}
-            variant={variant as ButtonTheme['variant']}
+          size={size as ButtonTheme['size']}
-            size={size !== 'disabled' ? (size as ButtonTheme['size']) : 'md'}
+          key={`${variant}-${size}`}
-            key={`${variant}-${size}`}
+        >
-            disabled={size === 'disabled'}
+          Button
-          >
+        </Button>
-            Button
+      ))}
-          </Button>
+    </div>
-        ))}
+  ));
-      </div>
-    ),
-  );
 };
 
 export const renderButtonIcons = () => {
-  return [
+  return iconOnlyVariants.map((variant, index) => (
-    'primary',
-    'secondary',
-    'tertiary',
-    'ghost',
-    'danger',
-    'danger-ghost',
-  ].map((variant, index) => (
     <div className="flex gap-5 flex-wrap" key={index}>
-      {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => (
+      {buttonSizes.map((size) => (
         <Button
           iconOnly
           variant={variant as ButtonTheme['variant']}
-          size={size !== 'disabled' ? (size as ButtonTheme['size']) : 'md'}
+          size={size as ButtonTheme['size']}
           key={`${variant}-${size}`}
-          disabled={size === 'disabled'}
         >
           <PlusIcon />
         </Button>
@@ -49,17 +50,38 @@ export const renderButtonIcons = () => {
 };
 
 export const renderLinks = () => {
-  return ['link', 'link-emphasized', 'disabled'].map((variant) => (
+  return linkVariants.map((variant) => (
     <Button
-      variant={
+      variant={variant}
-        variant !== 'disabled' ? (variant as ButtonTheme['variant']) : 'link'
-      }
       key={variant}
       leftIcon={<PlusIcon />}
       rightIcon={<PlusIcon />}
-      disabled={variant === 'disabled'}
     >
       Link
     </Button>
   ));
 };
+
+export const renderDisabledButtons = () => {
+  return (
+    <>
+      {/* Button variants */}
+      <Button leftIcon={<PlusIcon />} rightIcon={<PlusIcon />} disabled>
+        Button
+      </Button>
+      {/* Icon only variants */}
+      <Button iconOnly disabled>
+        <PlusIcon />
+      </Button>
+      {/* Link variantws */}
+      <Button
+        variant="link"
+        disabled
+        leftIcon={<PlusIcon />}
+        rightIcon={<PlusIcon />}
+      >
+        Link
+      </Button>
+    </>
+  );
+};