Merge pull request 'Input group component' (#57) from feature/Input-group into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/57

src/components/Inputgroup.tsx

@@ -0,0 +1,52 @@
+/**
+ * A container for components
+ * Any component can be a child for this container
+ */
+import React, { useEffect, useState, cloneElement } from "react";
+import classNames from "classnames";
+
+const focusable = ["input", "select", "textarea", "button"];
+
+export type Props = {
+  /**
+   * Container's children
+   */
+  children?: React.ReactNode | React.ReactNode[];
+} & React.HTMLProps<HTMLDivElement>;
+
+const Inputgroup = ({ children }: Props) => {
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {}, [focused]);
+  const arrChildren = React.Children.toArray(children);
+
+  return (
+    <div
+      className={classNames(
+        "border border-gray-200 rounded flex items-center p-1 m-4",
+        focused ? "border-gray-900" : "border-gray-300"
+      )}
+    >
+      {arrChildren.map((e) => {
+        if (
+          React.isValidElement(e) &&
+          typeof e.type === "string" &&
+          focusable.includes(e.type)
+        ) {
+          return cloneElement(e as React.ReactComponentElement<"input">, {
+            onFocus: (event: any) => {
+              setFocused(true);
+              e.props.onFocus && e.props.onFocus(event);
+            },
+            onBlur: (event: any) => {
+              setFocused(false);
+              e.props.onBlur && e.props.onBlur(event);
+            },
+          });
+        }
+        return e;
+      })}
+    </div>
+  );
+};
+
+export default Inputgroup;