86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
|
import { FC, FormEvent, SyntheticEvent, useState } from 'react'
|
||
|
|
import { result } from '../../../common/result'
|
||
|
|
import { createWish, Wish } from '../models'
|
||
|
|
|
||
|
|
interface CreateWishProps {
|
||
|
|
onFocus: () => void
|
||
|
|
onSubmit: (wish: Wish) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const CreateWish: FC<CreateWishProps> = (props) => {
|
||
|
|
const [focused, setFocused] = useState<boolean>(false)
|
||
|
|
|
||
|
|
const onSubmit = (e: SyntheticEvent) => {
|
||
|
|
e.preventDefault()
|
||
|
|
|
||
|
|
const target = e.target as typeof e.target & {
|
||
|
|
wishName: { value: string }
|
||
|
|
wishDescription: { value?: string }
|
||
|
|
wishLink: { value?: string }
|
||
|
|
}
|
||
|
|
|
||
|
|
const wishRes = createWish(
|
||
|
|
target.wishName.value,
|
||
|
|
target.wishDescription.value,
|
||
|
|
target.wishLink.value
|
||
|
|
)
|
||
|
|
|
||
|
|
result.tap(wishRes, (wish) => {
|
||
|
|
props.onSubmit(wish)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div onFocus={() => setFocused(true)}>
|
||
|
|
<BasePrompt>
|
||
|
|
<form onSubmit={onSubmit}>
|
||
|
|
<div className="shadow p-4 space-y-6 bg-white">
|
||
|
|
<div className="p-1 rounded space-y-6 bg-pink-100">
|
||
|
|
<div className="bg-pink-100 transition-all">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
name="wishName"
|
||
|
|
placeholder="Your wish!"
|
||
|
|
className="appearance-none w-full bg-pink-100 text-lg text-center p-6 outline-none"
|
||
|
|
/>
|
||
|
|
<div className={focused ? 'block' : 'hidden'}>
|
||
|
|
<InnerWishPrompt />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="py-2 px-4 bg-pink-400 rounded text-white"
|
||
|
|
>
|
||
|
|
Submit
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</BasePrompt>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const InnerWishPrompt: FC = (props) => {
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<textarea
|
||
|
|
name="wishDescription"
|
||
|
|
placeholder="Description"
|
||
|
|
className="block appearance-none w-full resize-none rounded py-3 px-4 outline-none bg-pink-100"
|
||
|
|
/>
|
||
|
|
<div className="h-0.5 w-3/4 m-auto w-content bg-gray-300" />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
name="wishLink"
|
||
|
|
placeholder="https://example.mywish"
|
||
|
|
className="block appearance-none w-full rounded py-3 px-4 outline-none bg-pink-100"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const BasePrompt: FC = (props) => <div>{props.children}</div>
|
||
|
|
|
||
|
|
export default CreateWish
|