From 69818aaf6dc8a590df4084f366307cf54b25873d Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 2 Sep 2025 11:03:51 +0800
Subject: [PATCH] Added input component

---
 fwt/components/Input/Input.sass |  3 +++
 fwt/components/Input/Input.tsx  | 27 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 fwt/components/Input/Input.sass
 create mode 100644 fwt/components/Input/Input.tsx

diff --git a/fwt/components/Input/Input.sass b/fwt/components/Input/Input.sass
new file mode 100644
index 0000000..fc8e6cf
--- /dev/null
+++ b/fwt/components/Input/Input.sass
@@ -0,0 +1,3 @@
+.input
+  font-size: 1rem
+  padding: 0.5rem 1rem
diff --git a/fwt/components/Input/Input.tsx b/fwt/components/Input/Input.tsx
new file mode 100644
index 0000000..c0f7c97
--- /dev/null
+++ b/fwt/components/Input/Input.tsx
@@ -0,0 +1,27 @@
+import './Input.sass'
+import { createSignal } from 'solid-js'
+
+interface Props {
+  placeholder?: string
+  value?: string
+  onChange?: (value: string) => void
+}
+
+export default (props: Props) => {
+  const [inputValue, setInputValue] = createSignal(props.value || '')
+
+  const handleChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const newValue = target.value
+    setInputValue(newValue)
+    if (props.onChange) {
+      props.onChange(newValue)
+    }
+  }
+
+  return (
+    <>
+      <input class="input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
+    </>
+  )
+}