EditableSection

import { useState } from 'react';
import { EditableSection, Text, TextField } from '@/components/polaris';

function Example() {
    const [isEditing, setIsEditing] = useState(false);

    return (
        <EditableSection
            title="Store details"
            isEditing={isEditing}
            onEdit={() => setIsEditing(true)}
            onSave={() => setIsEditing(false)}
            onCancel={() => setIsEditing(false)}
            viewContent={<Text>My Awesome Store</Text>}
            editContent={<TextField label="Store name" value="My Awesome Store" />}
        />
    );
}