From ece5e2434c0d90a075865e42a3ac1009581e8671 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 18 Mar 2023 06:50:03 -0700
Subject: [PATCH] Implement InputTableField

---
 components/InputTableField/index.scss |  4 +++
 components/InputTableField/index.tsx  | 49 +++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 components/InputTableField/index.scss
 create mode 100644 components/InputTableField/index.tsx

diff --git a/components/InputTableField/index.scss b/components/InputTableField/index.scss
new file mode 100644
index 00000000..94544da9
--- /dev/null
+++ b/components/InputTableField/index.scss
@@ -0,0 +1,4 @@
+.InputField.TableField .Input {
+  text-align: right;
+  width: $unit-8x;
+}
diff --git a/components/InputTableField/index.tsx b/components/InputTableField/index.tsx
new file mode 100644
index 00000000..5d1e34af
--- /dev/null
+++ b/components/InputTableField/index.tsx
@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+import Input from '~components/Input'
+import TableField from '~components/TableField'
+
+import './index.scss'
+
+interface Props {
+  name: string
+  label: string
+  description?: string
+  value?: number
+  className?: string
+  imageAlt?: string
+  imageClass?: string
+  imageSrc?: string[]
+}
+
+const InputTableField = (props: Props) => {
+  const [value, setValue] = useState(0)
+
+  useEffect(() => {
+    if (props.value) setValue(props.value)
+  }, [props.value])
+
+  function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setValue(parseInt(event.currentTarget?.value))
+  }
+
+  return (
+    <TableField
+      name={props.name}
+      className="InputField"
+      imageAlt={props.imageAlt}
+      imageClass={props.imageClass}
+      imageSrc={props.imageSrc}
+      label={props.label}
+    >
+      <Input
+        className="Bound"
+        type="number"
+        value={`${value}`}
+        step={1}
+        onChange={onInputChange}
+      />
+    </TableField>
+  )
+}
+
+export default InputTableField