From c5f255d0026134204cd210e3428b13ee6a684d96 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 13 May 2024 12:38:26 +0700
Subject: [PATCH] Refactor CardButtonTitle and CardButtonHeader components for
 flexibility

Changed the component type of CardButtonTitle from HTMLSpanElement to HTMLDivElement to provide more flexibility. Modified the CardButtonHeader component to include new optional properties (asChild and displayArrow), and revised its structure to correctly display its children and ChevronRight icon based on the provided props.
---
 packages/ui/src/makerkit/card-button.tsx | 36 ++++++++++++++++--------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/makerkit/card-button.tsx b/packages/ui/src/makerkit/card-button.tsx
index 4baf1d8bd..92f85db74 100644
--- a/packages/ui/src/makerkit/card-button.tsx
+++ b/packages/ui/src/makerkit/card-button.tsx
@@ -30,14 +30,14 @@ export const CardButton = React.forwardRef<
 });
 
 export const CardButtonTitle = React.forwardRef<
-  HTMLSpanElement,
+  HTMLDivElement,
   {
     className?: string;
     asChild?: boolean;
     children: React.ReactNode;
   }
 >(function CardButtonTitle({ className, asChild, ...props }, ref) {
-  const Comp = asChild ? Slot : 'span';
+  const Comp = asChild ? Slot : 'div';
 
   return (
     <Comp
@@ -58,18 +58,30 @@ export const CardButtonHeader = React.forwardRef<
   {
     className?: string;
     children: React.ReactNode;
+    asChild?: boolean;
+    displayArrow?: boolean;
   }
->(function CardButtonHeader({ className, ...props }, ref) {
-  return (
-    <div className={cn(className, 'p-4')} {...props} ref={ref}>
-      {props.children}
+>(function CardButtonHeader(
+  { className, asChild, displayArrow = true, ...props },
+  ref,
+) {
+  const Comp = asChild ? Slot : 'div';
 
-      <ChevronRight
-        className={
-          'absolute right-2 top-4 h-4 text-muted-foreground transition-colors group-hover:text-secondary-foreground'
-        }
-      />
-    </div>
+  return (
+    <Comp className={cn(className, 'p-4')} {...props} ref={ref}>
+      <Slottable>
+        {props.children}
+
+        <ChevronRight
+          className={cn(
+            'absolute right-2 top-4 h-4 text-muted-foreground transition-colors group-hover:text-secondary-foreground',
+            {
+              hidden: !displayArrow,
+            },
+          )}
+        />
+      </Slottable>
+    </Comp>
   );
 });