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`}>
-				<input
+				<form 
-					type="text"
+					onSubmit={(e)=>{
-					onChange={(e)=>{
+						e.preventDefault()
-						setName(e.target.value)
-					}}
-					value={name}
-				/>
-				<button 
-					onClick={()=>{
 						props.onPressed?.(name)
 						setName("")
-					}}
+						setShow(false)
-				>
+					}}>
-                    Create
+					<input
-				</button>
+						type="text"
+						onChange={(e)=>setName(e.target.value)}
+						value={name}
+						ref={input}
+						onBlur={()=>{
+							setShow(false)
+							setName("")
+						}}
+					/>
+					{/* <button 
+						onClick={()=>{
+							props.onPressed?.(name)
+							setName("")
+							setShow(false)
+						}}
+					>
+						Create
+					</button> */}
+				</form>
 			</div>
 		</div>
 	)