create dir button layout

src/components/CreateDirButton.tsx

@@ -1,4 +1,5 @@
-import React from "react"
+import React, { useRef } from "react"
+import { useEffect } from "react"
 import { useState } from "react"
 
 interface Props {
@@ -8,28 +9,53 @@ interface Props {
 const CreateDirButton: React.FC<Props> = (props) => {
     
 	const [name,setName] = useState("")
+	const [show,setShow] = useState(false)
+	const input = useRef<HTMLInputElement>(null)
+
+	useEffect(()=>{
+		if(show){
+			input.current?.focus()
+		}
+	},[show])
 
 	return (
 		<div>
-			<button>
+			<button
+				onClick={()=>{
+					setShow(!show)
+
+				}}
+			>
                 Create Dir
 			</button>
-			<div>
+			<div className={`${!show?"hidden":""} flex`}>
+				<form 
+					onSubmit={(e)=>{
+						e.preventDefault()
+						props.onPressed?.(name)
+						setName("")
+						setShow(false)
+					}}>
 					<input
 						type="text"
-					onChange={(e)=>{
+						onChange={(e)=>setName(e.target.value)}
-						setName(e.target.value)
-					}}
 						value={name}
+						ref={input}
+						onBlur={()=>{
+							setShow(false)
+							setName("")
+						}}
 					/>
-				<button 
+					{/* <button 
 						onClick={()=>{
 							props.onPressed?.(name)
 							setName("")
+							setShow(false)
 						}}
 					>
 						Create
-				</button>
+					</button> */}
+				</form>
 			</div>
 		</div>
 	)