Updated

@dasig/components/Input.astro

@@ -0,0 +1,52 @@
+---
+interface Props {
+  placeholder?: string
+  value?: string
+  onChange?: (value: string) => void
+}
+
+const { placeholder, value, onChange } = Astro.props
+
+let inputValue = value
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const newValue = target.value
+  setInputValue(newValue)
+  if (props.onChange) {
+    props.onChange(newValue)
+  }
+}
+---
+
+<input class="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
+
+<style lang="sass">
+  .dasig-input
+    font-size: 1rem
+    padding: 0.5rem 1rem
+    width: 100%
+    border: 2px solid #ccc
+    border-radius: 4px
+    outline: none
+    transition: border-color 0.3s, box-shadow 0.3s
+
+    &:focus
+      border-color: #3377AC
+      box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
+
+    &::placeholder
+      color: #888
+      font-style: italic
+
+    &:disabled
+      background-color: #f0f0f0
+      border-color: #ddd
+
+    &--error
+      border-color: #ff4d4f
+      box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
+
+      &:focus
+        border-color: #e81123
+</style>