import { PencilIcon } from "@heroicons/react/solid"; import { useState } from "react"; const EditableHeading = ({ title, onChange, placeholder = "", readOnly = false, }: { title: string; onChange?: (value: string) => void; placeholder?: string; readOnly?: boolean; }) => { const [isEditing, setIsEditing] = useState(false); const enableEditing = () => !readOnly && setIsEditing(true); return (
{!isEditing ? ( <>

{title}

{!readOnly ? ( ) : null} ) : (
{ setIsEditing(false); onChange && onChange(e.target.value); }} />
)}
); }; export default EditableHeading;