79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { FC, ReactNode } from 'react'
|
|
import { Wish } from '../models'
|
|
|
|
interface CreateWishProps {
|
|
onFocus: () => void
|
|
hasFocus: boolean
|
|
onSubmit: (wish: Wish) => void
|
|
wish: Wish
|
|
children?: ReactNode
|
|
}
|
|
|
|
const CreateWish: FC<CreateWishProps> = (props) => {
|
|
return (
|
|
<div onFocus={() => props.onFocus()}>
|
|
<div className="space-y-6 rounded bg-pink-100 p-1">
|
|
<div className="bg-pink-100 transition-all">
|
|
<input
|
|
type="text"
|
|
name="wishName"
|
|
placeholder="Your wish!"
|
|
className="w-full appearance-none bg-pink-100 p-6 text-center text-xl font-medium outline-none"
|
|
onChange={(e) =>
|
|
props.onSubmit({ ...props.wish, name: e.target.value })
|
|
}
|
|
value={props.wish.name}
|
|
/>
|
|
<div className={`${props.hasFocus ? 'block' : 'hidden'}`}>
|
|
<InnerWishPrompt wish={props.wish} onChange={props.onSubmit} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface InnerWishPromptInterface {
|
|
wish: Wish
|
|
onChange: (wish: Wish) => void
|
|
children?: ReactNode
|
|
}
|
|
|
|
const InnerWishPrompt: FC<InnerWishPromptInterface> = (props) => {
|
|
return (
|
|
<div className="space-y-4">
|
|
<textarea
|
|
name="wishDescription"
|
|
placeholder="Description"
|
|
className="block w-full resize-none appearance-none rounded bg-pink-100 py-3 px-4 outline-none"
|
|
onChange={(e) =>
|
|
props.onChange({ ...props.wish, description: e.target.value })
|
|
}
|
|
value={props.wish.description}
|
|
/>
|
|
<div className="w-content m-auto h-0.5 w-3/4 bg-gray-300" />
|
|
<input
|
|
type="text"
|
|
name="wishLink"
|
|
placeholder="https://example.mywish"
|
|
className="block w-full appearance-none rounded bg-pink-100 py-3 px-4 outline-none"
|
|
onChange={(e) =>
|
|
props.onChange({ ...props.wish, link: e.target.value })
|
|
}
|
|
value={props.wish.link}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface BasePromptProps {
|
|
children?: ReactNode
|
|
}
|
|
export const BasePrompt: FC<BasePromptProps> = (props) => (
|
|
<div>
|
|
<div className="space-y-6 bg-white p-4 shadow">{props.children}</div>
|
|
</div>
|
|
)
|
|
|
|
export default CreateWish
|