63 lines
2.6 KiB
JavaScript
63 lines
2.6 KiB
JavaScript
import PropTypes from 'prop-types';
|
||
import { Link } from 'react-router-dom';
|
||
import { Col } from 'react-bootstrap';
|
||
import { Cart } from 'react-bootstrap-icons';
|
||
import imgPlaceholder from '../../../assets/placeholder.jpg';
|
||
import './LineTableRow.css';
|
||
|
||
const LinesTableRow = ({ line, onAddCart, toInfoPage }) => {
|
||
const handleAnchorClick = (event, action) => {
|
||
event.preventDefault();
|
||
action();
|
||
};
|
||
const price = <p className='price_of_game_main_page'>{parseFloat(line.price).toFixed(0)} руб.</p>;
|
||
|
||
return (
|
||
<tr>
|
||
<td className = 'align-middle p-0 cell1_main_page'>
|
||
<img src={line.image || imgPlaceholder} className='img-fluid w-100 h-100' alt='image of game'></img>
|
||
</td>
|
||
<td className = 'align-middle p-0 cell2_main_page'>
|
||
<Link className = 'nav-link active name_of_game_main_page' onClick={(event) => handleAnchorClick(event, toInfoPage)}> {line.title} </Link>
|
||
{price}
|
||
</td>
|
||
<td className = 'align-middle p-0'>
|
||
<p className = 'genre_of_game_main_page ms-5 me-5'> {line.type.name} </p>
|
||
</td>
|
||
<td className='text-center align-middle p-0'>
|
||
<Col className='text-center mt-3'> <a href="#" onClick={(event) => handleAnchorClick(event, onAddCart)}><Cart /></a> </Col>
|
||
</td>
|
||
</tr>
|
||
);
|
||
// return (
|
||
// <tr className='w-100'>
|
||
// <td className = 'align-middle ms-5 cell1_main_page'>
|
||
// <img src={line.image} className='cell3_main_page' alt='image'></img>
|
||
// </td>
|
||
// <td className = 'align-middle ms-5 me-5 cell1_main_page'>
|
||
// <Link className = 'nav-link active name_of_game_main_page'> {line.title} </Link>
|
||
// {price};
|
||
// {/* <p className='price_of_game_main_page mt-4 ms-5 me-5'> {parseFloat(line.price).toFixed(0)} ₽ </p> */}
|
||
// </td>
|
||
// <td className = 'align-middle ps-2 pe-5 text-center'>
|
||
// <p className = 'genre_of_game_main_page'> {line.type.name} </p>
|
||
// </td>
|
||
// <td className = 'align-middle ms-5 me-5 cell1_main_page'>
|
||
// <p className="card-text textlinkBut"> {(line.description)} </p>
|
||
// </td>
|
||
// <td className='cell1_main_page'>
|
||
// <Col className='text-center mt-3'> <a href="#" onClick={(event) => handleAnchorClick(event, onAddCart)}><Cart /></a> </Col>
|
||
// </td>
|
||
// </tr>
|
||
// );
|
||
};
|
||
|
||
LinesTableRow.propTypes = {
|
||
index: PropTypes.number,
|
||
line: PropTypes.object,
|
||
onAddCart: PropTypes.func,
|
||
toInfoPage: PropTypes.func,
|
||
};
|
||
|
||
export default LinesTableRow;
|