{"size": 1118, "ext": "js", "max_stars_repo_path": "src/components/Transaction/Transaction.js", "max_stars_repo_name": "Maryna1704/goit-react-hw-01-components", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Transaction/Transaction.js", "max_issues_repo_name": "Maryna1704/goit-react-hw-01-components", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Transaction/Transaction.js", "max_forks_repo_name": "Maryna1704/goit-react-hw-01-components", "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": 27.95, "max_line_length": 56, "alphanum_fraction": 0.5411449016}
import React from "react";
import PropTypes from 'prop-types';
import style from './Transaction.module.css'

const Transaction = ({items}) => (
    <table className={style.history}>
        <thead className={style.thead}>
        <tr>
            <th className={style.th}>Type</th>
            <th className={style.th}>Amount</th>
            <th className={style.th}>Currency</th>
        </tr>
        </thead>
        <tbody className={style.tbody}>
        {items.map (({id, type, amount, currency}) => (

            <tr key={id} className={style.tr}>
                <td className={style.td}>{type}</td>
                <td className={style.td}>{amount}</td>
                <td className={style.td}>{currency}</td>
            </tr>

        ))
        }

        </tbody>
    </table>
)

export default Transaction
Transaction.propTypes = {
    items: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.string.isRequired,
            type: PropTypes.string.isRequired,
            amount: PropTypes.string.isRequired,
            currency: PropTypes.string.isRequired,
        }),
    ),
};