text: import React, { useRef } from "react";
  
  import { StandardInput } from "@components/Reusable/Inputs";
  import { StandardButton } from "@components/Reusable/Buttons";
  
  import { useLoggedUserState } from "@modules/LoggedUserModule";
  
  import { folderNew } from "@ipc/folder";
  
  import style from "@styles/components/PanelsComponents/FoldersPanel/index.scss";
  
  const NewFolderPanel = () => {
    const newFolderName = useRef();
    const { id } = useLoggedUserState();
  
    const enterClickHandler = (event) => {
      if (
        event.key === "Enter" &&
        newFolderName.current.value !== "" &&
        newFolderName.current.value.match(/^\s*$/) === null
      ) {
        newFolderName.current.blur();
        buttonHandler();
      }
    };
  
    const buttonHandler = () => {
      folderNew(newFolderName.current.value, id);
      newFolderName.current.value = "";
    };
  
    return (
      <div className={style.create_folders_wrapper}>
        <StandardInput
          placeholder="Folder name..."
          ref={newFolderName}
          onKeyDown={enterClickHandler}
        />
        <StandardButton onClick={buttonHandler}>+ Add folder</StandardButton>
      </div>
    );
  };
  
  export default NewFolderPanel;
  