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

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