From ed2871b5c2f3a43cf0046688263b43d989d7cc87 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 27 Sep 2024 21:18:13 -0300
Subject: [PATCH] Add new "feature" prop

---
 src/components/ui/column/column.tsx | 34 +++++++++++++++++------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/column/column.tsx b/src/components/ui/column/column.tsx
index 3d7326f2a..347371a5a 100644
--- a/src/components/ui/column/column.tsx
+++ b/src/components/ui/column/column.tsx
@@ -61,11 +61,13 @@ export interface IColumn {
   action?: React.ReactNode;
   /** Column size, inherited from Card. */
   size?: CardSizes;
+  /** Extra feature. */
+  feature?: JSX.Element;
 }
 
 /** A backdrop for the main section of the UI. */
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
-  const { backHref, children, label, transparent = false, withHeader = true, className, bodyClassName, action, size } = props;
+  const { backHref, children, label, transparent = false, withHeader = true, className, bodyClassName, action, size, feature } = props;
   const soapboxConfig = useSoapboxConfig();
   const [isScrolled, setIsScrolled] = useState(false);
 
@@ -97,20 +99,24 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
 
       <Card size={size} variant={transparent ? undefined : 'rounded'} className={className}>
         {withHeader && (
-          <ColumnHeader
-            label={label}
-            backHref={backHref}
-            className={clsx({
-              'rounded-t-3xl': !isScrolled && !transparent,
-              'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/90 backdrop-blur lg:top-16': !transparent,
-              'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
-              '-mt-4 p-4': size !== 'lg' && !transparent,
-              '-mt-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
-            })}
-            action={action}
-          />
-        )}
+          <div className='flex justify-between'>
+            <ColumnHeader
+              label={label}
+              backHref={backHref}
+              className={clsx({
+                'rounded-t-3xl': !isScrolled && !transparent,
+                'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/90 backdrop-blur lg:top-16': !transparent,
+                'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
+                '-mt-4 p-4': size !== 'lg' && !transparent,
+                '-mt-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
+              })}
+              action={action}
+            />
 
+            {feature}
+
+          </div>
+        )}
         <CardBody className={bodyClassName}>
           {children}
         </CardBody>