wishlist-client/components/domain/wishes/createWish/CreateWish.tsx

79 lines
2.2 KiB
TypeScript
Raw Permalink Normal View History

2022-10-27 21:46:17 +02:00
import { FC, ReactNode } from 'react'
import { Wish } from '../models'
2022-04-24 23:12:11 +02:00
interface CreateWishProps {
onFocus: () => void
2022-04-25 22:32:24 +02:00
hasFocus: boolean
2022-04-24 23:12:11 +02:00
onSubmit: (wish: Wish) => void
2022-04-25 22:32:24 +02:00
wish: Wish
2022-10-27 21:46:17 +02:00
children?: ReactNode
2022-04-24 23:12:11 +02:00
}
const CreateWish: FC<CreateWishProps> = (props) => {
return (
2022-04-25 22:32:24 +02:00
<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!"
2022-10-27 21:46:17 +02:00
className="w-full appearance-none bg-pink-100 p-6 text-center text-xl font-medium outline-none"
2022-04-25 22:32:24 +02:00
onChange={(e) =>
props.onSubmit({ ...props.wish, name: e.target.value })
}
value={props.wish.name}
/>
2022-04-25 22:51:45 +02:00
<div className={`${props.hasFocus ? 'block' : 'hidden'}`}>
2022-04-25 22:32:24 +02:00
<InnerWishPrompt wish={props.wish} onChange={props.onSubmit} />
2022-04-24 23:12:11 +02:00
</div>
2022-04-25 22:32:24 +02:00
</div>
</div>
2022-04-24 23:12:11 +02:00
</div>
)
}
2022-04-25 22:32:24 +02:00
interface InnerWishPromptInterface {
wish: Wish
onChange: (wish: Wish) => void
2022-10-27 21:46:17 +02:00
children?: ReactNode
2022-04-25 22:32:24 +02:00
}
const InnerWishPrompt: FC<InnerWishPromptInterface> = (props) => {
2022-04-24 23:12:11 +02:00
return (
<div className="space-y-4">
<textarea
name="wishDescription"
placeholder="Description"
2022-04-25 22:32:24 +02:00
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}
2022-04-24 23:12:11 +02:00
/>
2022-04-25 22:32:24 +02:00
<div className="w-content m-auto h-0.5 w-3/4 bg-gray-300" />
2022-04-24 23:12:11 +02:00
<input
type="text"
name="wishLink"
placeholder="https://example.mywish"
2022-04-25 22:32:24 +02:00
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}
2022-04-24 23:12:11 +02:00
/>
</div>
)
}
2022-10-27 21:46:17 +02:00
interface BasePromptProps {
children?: ReactNode
}
export const BasePrompt: FC<BasePromptProps> = (props) => (
2022-04-25 22:32:24 +02:00
<div>
<div className="space-y-6 bg-white p-4 shadow">{props.children}</div>
</div>
)
2022-04-24 23:12:11 +02:00
export default CreateWish