wedding-planner-frontend/app/ui/components/form/inlineTextField.tsx

import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
import React, { useState } from 'react';
import { classNames } from '../button';

export default function InlineTextField({ initialValue, onChange }: { initialValue: string, onChange: (value: string) => void }) {
    const [editing, setEditing] = useState(false);
    const [value, setValue] = useState(initialValue);

    const renderText = () => <span onClick={() => setEditing(true)}>{value}</span>

    const onConfirm = () => {
        onChange(value);
        setEditing(false);
    }

    const onCancel = () => {
        setValue(initialValue);
        setEditing(false);
    }

    function renderForm() {
        return (
            <div className="flex flex-row">
                <input
                    type="text"
                    value={value}
                    className="px-2 py-0 h-5 max-w-48"
                    onChange={(e) => setValue(e.target.value)}
                    autoFocus
                />
                <>
                    <CheckIcon color='green' className="h-5 w-5 mx-2" onClick={onConfirm} />
                    <XMarkIcon color='red' className="h-5 w-5 mx-2" onClick={onCancel} />
                </>
            </div>
        )
    }

    return (
        editing ? (renderForm()) : (renderText())
    );
}