From b2fcdfe8cd2fe29e5be6fba77587d35e1f57644d Mon Sep 17 00:00:00 2001
From: oscar <oscarzhou0727@icloud.com>
Date: Sat, 18 Mar 2023 12:25:02 +1300
Subject: [PATCH] add input component for meal item

---
 src/components/UI/Input.js         | 12 ++++++++++++
 src/components/UI/Input.module.css | 18 ++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/components/UI/Input.js
 create mode 100644 src/components/UI/Input.module.css

diff --git a/src/components/UI/Input.js b/src/components/UI/Input.js
new file mode 100644
index 0000000..93aaba5
--- /dev/null
+++ b/src/components/UI/Input.js
@@ -0,0 +1,12 @@
+import classes from "./Input.module.css";
+
+const Input = (props) => {
+  return (
+    <div className={classes.input}>
+      <label htmlFor={props.input.id}>{props.label}</label>
+      <input id={props.input.id} {...props.input} />
+    </div>
+  );
+};
+
+export default Input;
diff --git a/src/components/UI/Input.module.css b/src/components/UI/Input.module.css
new file mode 100644
index 0000000..1a27294
--- /dev/null
+++ b/src/components/UI/Input.module.css
@@ -0,0 +1,18 @@
+.input {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.input label {
+  font-weight: bold;
+  margin-right: 1rem;
+}
+
+.input input {
+  width: 3rem;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font: inherit;
+  padding-left: 0.5rem;
+}
\ No newline at end of file