{"size": 1575, "ext": "js", "max_stars_repo_path": "application/milestone3/frontend/src/components/Report.js", "max_stars_repo_name": "MAbril1/LetsDonate", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "application/milestone3/frontend/src/components/Report.js", "max_issues_repo_name": "MAbril1/LetsDonate", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "application/milestone3/frontend/src/components/Report.js", "max_forks_repo_name": "MAbril1/LetsDonate", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.7169811321, "max_line_length": 96, "alphanum_fraction": 0.3441269841}
import React from 'react';
import './css/PopUps.css';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';

/*
**  Report.js
**
**  This component is popup for reporting a user or post
*/
function Report( {} ) {
    
    return (
        <Popup
            trigger={<button className="important"> Report </button>}
            modal
            nested
        >
            {close => (
                <div className="popup">
                    <button className="close" onClick={close}>
                        &times;
                    </button>
                    <div className="header"> Please leave an explanation for this report: </div>
                    <div className="content">
                        <input type="text" />
                    </div>
                    <div className="actions">
                        <button
                            className="button"
                            onClick={() => {
                                console.log('report closed');
                                close();
                            }}
                        >
                            Cancel
                        </button>
                        <button
                            className="important"
                            onClick={() => {
                      
                            }}
                        >
                            Report
                        </button>
                    </div>
                </div>
            )}
        </Popup>
    )
}

export default Report