1 files changed, 41 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Input.js b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Input.js
new file mode 100644
index 0000000..68e4e77
--- /dev/null
+++ b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Input.js
@@ -0,0 +1,41 @@
+import { forwardRef } from "react";
+
+function Input(
+  {
+    label,
+    id,
+    name,
+    type = "text",
+    value,
+    onChangeHandler,
+    onBlurHandler,
+    additionalClasses = "",
+  },
+  ref
+) {
+  const classNames = `form__input ${additionalClasses}`;
+
+  return (
+    <>
+      {label ? (
+        <label className="form__label" htmlFor={id}>
+          {label}
+        </label>
+      ) : (
+        ""
+      )}
+      <input
+        id={id}
+        name={name}
+        ref={ref}
+        type={type}
+        value={value}
+        onChange={onChangeHandler}
+        onBlur={onBlurHandler}
+        className={classNames}
+      />
+    </>
+  );
+}
+
+export default forwardRef(Input);