From e2f3a308fb5cc57ba97c05e5bf8f4010ea206f4a Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 7 Aug 2023 20:59:55 +0700
Subject: [PATCH] reusable input component

---
 .../src/components/common/Input.tsx           | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 packages/fakeyou.com/src/components/common/Input.tsx

diff --git a/packages/fakeyou.com/src/components/common/Input.tsx b/packages/fakeyou.com/src/components/common/Input.tsx
new file mode 100644
index 0000000000..7b0b631faa
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Input.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+interface InputProps {
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value?: string;
+  icon?: IconDefinition;
+  label?: string;
+  placeholder?: string;
+  type?: string;
+}
+
+export default function Input(props: InputProps) {
+  return (
+    <div>
+      {props.label && <label className="sub-title">{props.label}</label>}
+
+      <div className={`form-group ${props.icon ? "input-icon" : ""}`}>
+        {props.icon && (
+          <FontAwesomeIcon
+            icon={props.icon}
+            className="form-control-feedback"
+          />
+        )}
+        <input
+          onChange={props.onChange}
+          className="form-control"
+          type={props.type && "text"}
+          placeholder={props.placeholder}
+          value={props.value}
+        />
+      </div>
+    </div>
+  );
+}