Add new "feature" prop

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,6 +99,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
 
       <Card size={size} variant={transparent ? undefined : 'rounded'} className={className}>
         {withHeader && (
+          <div className='flex justify-between'>
             <ColumnHeader
               label={label}
               backHref={backHref}
@@ -109,8 +112,11 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
               })}
               action={action}
             />
-        )}
 
+            {feature}
+
+          </div>
+        )}
         <CardBody className={bodyClassName}>
           {children}
         </CardBody>