text: import React, { useState } from "react";
  import AddIcon from "@material-ui/icons/Add";
  import Fab from "@material-ui/core/Fab";
  import Zoom from "@material-ui/core/Zoom";
  
  const CreateArea = ({ onAdd }) => {
    const [isExpanded, setExpanded] = useState(false);
  
    const [note, setNote] = useState({
      title: "",
      content: "",
    });
  
    const { title, content } = note;
  
    function handleChange(e) {
      const { name, value } = e.target;
      setNote((prevNote) => {
        return {
          ...prevNote,
          [name]: value,
        };
      });
    }
  
    function submitNote(e) {
      e.preventDefault();
      if (title.length > 0 && content.length > 0) {
        onAdd(note);
        setNote({ title: "", content: "" });
      }
    }
  
    function expand() {
      setExpanded(true);
    }
  
    return (
      <div>
        <form className="create-note">
          {isExpanded ? (
            <input
              name="title"
              value={title}
              onChange={handleChange}
              autoComplete="off"
              placeholder="Title"
            />
          ) : null}
          <textarea
            name="content"
            value={content}
            onClick={expand}
            onChange={handleChange}
            placeholder="Take a note..."
            rows={isExpanded ? 3 : 1}
          />
          <Zoom in={isExpanded ? true : false}>
            <Fab onClick={submitNote}>
              <AddIcon />
            </Fab>
          </Zoom>
        </form>
      </div>
    );
  };
  
  export default CreateArea;
  