52 lines
1.1 KiB
Text
52 lines
1.1 KiB
Text
---
|
|
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>
|