diff --git a/src/components/Renameable.tsx b/src/components/Renameable.tsx
new file mode 100644
index 0000000..bda3e38
--- /dev/null
+++ b/src/components/Renameable.tsx
@@ -0,0 +1,49 @@
+import React from "react"
+import { useEffect } from "react"
+import { useRef } from "react"
+import { useState } from "react"
+
+interface Props {
+    text: string
+    edit: boolean
+    onRename?: (newName: string)=>void
+	onCancleRename?: ()=>void
+}
+
+const Renameable: React.FC<Props> = (props) => {
+	const [inputValue,setinputValue] = useState(props.text)
+	const inputRef = useRef<HTMLInputElement>(null)
+
+	useEffect(()=>{
+		if (props.edit){
+			inputRef.current?.select()
+		}else{
+			setinputValue(props.text)
+		}
+	},[props.edit])
+
+	return (
+		<>
+			{props.edit && <form className="inline" onSubmit={(e)=>{
+				e.preventDefault()
+				props.onRename?.(inputValue)
+			}}>
+				<input
+					className="bg-transparent dark:text-gray-300 outline-none inline"
+					type="text"
+					ref={inputRef}
+					value={inputValue}
+					onClick={(e)=>e.stopPropagation()}
+					onChange={(e)=>{setinputValue(e.target.value)}}
+					onBlur={props.onCancleRename}
+				/></form>
+				
+			}
+			{!props.edit &&
+                <div className="inline">{props.text}</div>
+			}
+		</>
+	)
+}
+
+export default Renameable