From 4c90f07abb152f82e371ef1a11aebda8084e6408 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Fri, 4 Oct 2024 18:38:54 +0200
Subject: [PATCH] Add extra component for input group

---
 src/components/InputGroup/InputGroup.tsx | 12 ++++++++++--
 src/components/InputGroup/inputGroup.css |  6 ++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/InputGroup/InputGroup.tsx b/src/components/InputGroup/InputGroup.tsx
index 073a461..33bf3ae 100644
--- a/src/components/InputGroup/InputGroup.tsx
+++ b/src/components/InputGroup/InputGroup.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, CSSProperties, LegacyRef } from "react";
+import { ChangeEvent, CSSProperties, LegacyRef, ReactNode } from "react";
 import "./inputGroup.css";
 import { Input } from "../Input/Input";
 import { Select } from "../Select/Select";
@@ -82,6 +82,8 @@ type Props = {
   max?: number | string;
 
   inputRef?: LegacyRef<HTMLInputElement>;
+
+  extra?: ReactNode;
 };
 
 export function InputGroup({
@@ -106,6 +108,7 @@ export function InputGroup({
   inputRef,
   min,
   max,
+  extra,
 }: Props) {
   return (
     <div className={`inputGroup ${className}`} style={style}>
@@ -146,7 +149,12 @@ export function InputGroup({
             )}
           </div>
         </div>
-        {helper && <small className="inputGroup-helper">{helper}</small>}
+        <div className="inputGroup-helpers">
+          <span>
+            {helper && <small className="inputGroup-helper">{helper}</small>}
+          </span>
+          {extra}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/InputGroup/inputGroup.css b/src/components/InputGroup/inputGroup.css
index 462ee06..b62d169 100644
--- a/src/components/InputGroup/inputGroup.css
+++ b/src/components/InputGroup/inputGroup.css
@@ -37,3 +37,9 @@ select.inputGroup-select {
 .inputGroup-inputContainer {
   flex: 1;
 }
+
+.inputGroup-helpers {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}