63 lines
2.6 KiB
React
63 lines
2.6 KiB
React
|
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;
|