GPT-3 Imagine

imagine.tsx

// A. So we have a React component
// B. that is a modal popup
// C. it has two buttons: Apply and Cancel
// D. when you press cancel, it hides itself
// E. when you press Apply, the function callback
// F. that was passed through props, is called
// G. Also, popup can draw inherited HTML fetched from props.children

// H. Bonus question! It looks wrong.
// Please add the dark overlay over background, and make the buttons more in style with the rest of the project
// ^^^ THIS ONE should add styles

import React, { useState } from 'react';

// A.
export const Modal: React.Component = () => {
    // D.
    const [isHidden, hide] = useState(true);

    // E.
    const apply = () => {
        this.props.callback();
    }

    // D.
    const cancel = () => {
        hide(true);
    }
    
    // B.
    return (
        <div class={`modal ${isHidden ? 'hidden' : ''}`}>
            <!-- G. -->
            <div class="inside">
                {{props.children}}
            </div>
            <!-- C. -->
            <Button onClick={apply}>Apply</Button>
            <Button onClick={cancel}>Apply</Button>
        </div>
    )
}