лаба5, товары отображаются в каталоге и оттуда добавляются в корзину
This commit is contained in:
a.puchkina
parent
4e74d8386e
commit
77f57f9576
File diff suppressed because one or more lines are too long
17
laba5/src/components/Card.css
Normal file
17
laba5/src/components/Card.css
Normal file
@ -0,0 +1,17 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
|
||||
|
||||
.card_catalog {
|
||||
width: 300px;
|
||||
margin: 20;
|
||||
font-family: "Montserrat Alternates";;
|
||||
}
|
||||
|
||||
.card_name{
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.card_price{
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
39
laba5/src/components/Card.jsx
Normal file
39
laba5/src/components/Card.jsx
Normal file
@ -0,0 +1,39 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import { Card, Button } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import useCart from './cart/CartHook';
|
||||
import './Card.css';
|
||||
import '../pages/Pages.css';
|
||||
import '../pages/Page3.css';
|
||||
|
||||
const CardOfRoom = ({
|
||||
product, price, image, card,
|
||||
}) => {
|
||||
const { addToCart } = useCart();
|
||||
const handleAnchorClick = (event, action) => {
|
||||
event.preventDefault();
|
||||
action();
|
||||
};
|
||||
return (
|
||||
<Card className='card_catalog'>
|
||||
<Link to="/Page6" > <img src={image} className="card-img-top" alt="..." /></Link>
|
||||
<div className="card-body">
|
||||
<p className="card-title card_name">{product}</p>
|
||||
<div className="caption_basket_price">
|
||||
<p className="card-title card_price"> { `${parseInt(price, 10)} ₽` }</p>
|
||||
</div>
|
||||
<div className="d-flex justify-content-center">
|
||||
<Button type="submit" variant="outline-secondary" onClick={ (event) => handleAnchorClick(event, () => addToCart(card))}> Добавить в корзину</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardOfRoom;
|
||||
CardOfRoom.propTypes = {
|
||||
product: PropTypes.string,
|
||||
info: PropTypes.string,
|
||||
image: PropTypes.string,
|
||||
};
|
||||
@ -1,3 +1,98 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
|
||||
|
||||
.cart{
|
||||
font-family: "Montserrat Alternates";
|
||||
}
|
||||
.cart .container-products {
|
||||
background-color: rgba(210, 202, 188, 0.64);
|
||||
position: relative;
|
||||
margin-bottom: 3%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.container-products .title-product,
|
||||
.container-products .price,
|
||||
.container-products .articuL,
|
||||
.container-products a {
|
||||
margin-left: 30%;
|
||||
position: absolute;
|
||||
padding: 3%;
|
||||
}
|
||||
.container-products .title-product {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.container-products .price {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.container-products .title-product,
|
||||
.container-products .price {
|
||||
font-weight: 700;
|
||||
}
|
||||
.container-products .articul {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-bottom: 3%;
|
||||
}
|
||||
.container-products a {
|
||||
width: 20%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
.cart .card{
|
||||
background-color: rgba(191, 180, 161, 1);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.cart u {
|
||||
padding-left: 4%;
|
||||
text-align: left;
|
||||
margin-left: 3%;
|
||||
font-weight: 500;
|
||||
padding-bottom: 10%;
|
||||
}
|
||||
.cart .btn{
|
||||
font-weight: 100;
|
||||
margin-top: 10%;
|
||||
margin-bottom: 3%;
|
||||
color: white;
|
||||
background-color: #533908;
|
||||
border: #533908 3px solid;
|
||||
}
|
||||
.cart .card-text{
|
||||
font-weight: 500;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color:#533908;
|
||||
}
|
||||
.cart .card-title{
|
||||
font-weight: 600;
|
||||
font-size: 23px;
|
||||
color:#533908;
|
||||
padding: 8px;
|
||||
margin-bottom: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
.cart .price-text{
|
||||
font-weight: 300;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color:#533908;
|
||||
}
|
||||
.cart .price-count{
|
||||
font-weight: 500;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
color:#533908;
|
||||
}
|
||||
.cart .imageOfProduct{
|
||||
padding: 10px;
|
||||
width: 30%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.cart-image {
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
30
laba5/src/components/lines/table/LinesTableRowForCatalog.jsx
Normal file
30
laba5/src/components/lines/table/LinesTableRowForCatalog.jsx
Normal file
@ -0,0 +1,30 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Row } from 'react-bootstrap';
|
||||
import CardOfRoom from '../../Card.jsx';
|
||||
import useLines from '../hooks/LinesHook';
|
||||
|
||||
const LinesTableRow = () => {
|
||||
const { lines } = useLines();
|
||||
|
||||
function allCards() {
|
||||
return lines.map((card) =>
|
||||
<CardOfRoom key={card.id}
|
||||
product={card.product}
|
||||
price={card.price} image={card.image} card={card} />);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row xs={1} md={2} className="g-4 justify-content-center">
|
||||
{allCards()}
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
LinesTableRow.propTypes = {
|
||||
index: PropTypes.number,
|
||||
line: PropTypes.object,
|
||||
onAddCart: PropTypes.func,
|
||||
};
|
||||
|
||||
export default LinesTableRow;
|
||||
@ -8,7 +8,6 @@ import CartPage from './pages/CartPage.jsx';
|
||||
import ErrorPage from './pages/ErrorPage.jsx';
|
||||
import Page1 from './pages/Page1.jsx';
|
||||
import Page2 from './pages/Page2.jsx';
|
||||
import Page3 from './pages/Page3.jsx';
|
||||
import Page4 from './pages/Page4.jsx';
|
||||
import Page5 from './pages/Page5.jsx';
|
||||
import Page6 from './pages/Page6.jsx';
|
||||
@ -24,11 +23,6 @@ const routes = [
|
||||
path: '/page2',
|
||||
element: <Page2 />, // Страница каталога
|
||||
},
|
||||
{
|
||||
path: '/page3',
|
||||
element: <Page3 />,
|
||||
title: 'Корзина',
|
||||
},
|
||||
{
|
||||
path: '/page4',
|
||||
element: <Page4 />,
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import Table1 from '../assets/table1.png';
|
||||
import Table2 from '../assets/table2.png';
|
||||
import Table3 from '../assets/table3.png';
|
||||
import Chair1 from '../assets/chair1.png';
|
||||
import Chair2 from '../assets/chair2.png';
|
||||
import Chair3 from '../assets/chair3.png';
|
||||
import Sofa1 from '../assets/sofa1.png';
|
||||
import Sofa2 from '../assets/sofa2.png';
|
||||
import Sofa3 from '../assets/sofa3.png';
|
||||
import './Page2.css';
|
||||
// import { Link } from 'react-router-dom';
|
||||
// import Table1 from '../assets/table1.png';
|
||||
// import Table2 from '../assets/table2.png';
|
||||
// import Table3 from '../assets/table3.png';
|
||||
// import Chair1 from '../assets/chair1.png';
|
||||
// import Chair2 from '../assets/chair2.png';
|
||||
// import Chair3 from '../assets/chair3.png';
|
||||
// import Sofa1 from '../assets/sofa1.png';
|
||||
// import Sofa2 from '../assets/sofa2.png';
|
||||
// import Sofa3 from '../assets/sofa3.png';
|
||||
// import './Page2.css';
|
||||
import './Pages.css';
|
||||
import LinesTableRow from '../components/lines/table/LinesTableRowForCatalog.jsx';
|
||||
|
||||
const Page2 = () => {
|
||||
return (
|
||||
@ -17,7 +18,9 @@ const Page2 = () => {
|
||||
<div className="catalogPage">
|
||||
<p className="title">КАТАЛОГ</p>
|
||||
<div className="text-center">
|
||||
<p className="text-catalog">Столы</p>
|
||||
<LinesTableRow />
|
||||
</div>
|
||||
{/* <p className="text-catalog">Столы</p>
|
||||
<Link to="/page6">
|
||||
<img src={Table1} alt="..."/>
|
||||
</Link>
|
||||
@ -51,7 +54,7 @@ const Page2 = () => {
|
||||
<Link to="/page6"
|
||||
><img src={Sofa3} alt="..."
|
||||
/></Link>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,94 +0,0 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
|
||||
|
||||
.cart{
|
||||
font-family: "Montserrat Alternates";
|
||||
}
|
||||
.cart .container-products {
|
||||
background-color: rgba(210, 202, 188, 0.64);
|
||||
position: relative;
|
||||
margin-bottom: 3%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.container-products .title-product,
|
||||
.container-products .price,
|
||||
.container-products .articuL,
|
||||
.container-products a {
|
||||
margin-left: 30%;
|
||||
position: absolute;
|
||||
padding: 3%;
|
||||
}
|
||||
.container-products .title-product {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.container-products .price {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.container-products .title-product,
|
||||
.container-products .price {
|
||||
font-weight: 700;
|
||||
}
|
||||
.container-products .articul {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-bottom: 3%;
|
||||
}
|
||||
.container-products a {
|
||||
width: 20%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
.cart .card{
|
||||
background-color: rgba(191, 180, 161, 1);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.cart u {
|
||||
padding-left: 4%;
|
||||
text-align: left;
|
||||
margin-left: 3%;
|
||||
font-weight: 500;
|
||||
padding-bottom: 10%;
|
||||
}
|
||||
.cart .btn{
|
||||
font-weight: 100;
|
||||
margin-top: 10%;
|
||||
margin-bottom: 3%;
|
||||
color: white;
|
||||
background-color: #533908;
|
||||
border: #533908 3px solid;
|
||||
}
|
||||
.cart .card-text{
|
||||
font-weight: 500;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color:#533908;
|
||||
}
|
||||
.cart .card-title{
|
||||
font-weight: 600;
|
||||
font-size: 23px;
|
||||
color:#533908;
|
||||
padding: 8px;
|
||||
margin-bottom: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
.cart .price-text{
|
||||
font-weight: 300;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color:#533908;
|
||||
}
|
||||
.cart .price-count{
|
||||
font-weight: 500;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
color:#533908;
|
||||
}
|
||||
.cart .imageOfProduct{
|
||||
padding: 10px;
|
||||
width: 30%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import {
|
||||
Container, Row, Col, Image, Card, Button,
|
||||
} from 'react-bootstrap';
|
||||
import Chair3 from '../assets/chair3.png';
|
||||
import Sofa3 from '../assets/sofa3.png';
|
||||
import IconDelete from '../assets/iconDelete.png';
|
||||
import './Pages.css';
|
||||
import './Page3.css';
|
||||
|
||||
const Page3 = () => {
|
||||
return (
|
||||
<Container className='cart'>
|
||||
<p className="title">КОРЗИНА</p>
|
||||
<Row>
|
||||
<Col sm={8}>
|
||||
<Container className="container-products p-0">
|
||||
<Image className='imageOfProduct' src={Sofa3} />
|
||||
<p className="title-product">Диван 3</p>
|
||||
<p className="articul">Артикул 2352788</p>
|
||||
<p className="price">14 999 руб.</p>
|
||||
<a className="navbar-brand p-0" href="#">
|
||||
<Image src={IconDelete} alt="Удалить" width="25" />
|
||||
</a>
|
||||
</Container>
|
||||
<Container className="container-products p-0">
|
||||
<Image className='imageOfProduct' src={Chair3}/>
|
||||
<div className="title-product">Кресло</div>
|
||||
<div className="articul">Артикул 6488268</div>
|
||||
<div className="price">7 999 руб.</div>
|
||||
<a className="navbar-brand p-0" href="#">
|
||||
<Image src={IconDelete} alt="Удалить" width="25" />
|
||||
</a>
|
||||
</Container>
|
||||
</Col>
|
||||
<Col sm={4}>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<Card.Title>Ваша корзина</Card.Title>
|
||||
<Card.Text className='price-text'>Общая цена</Card.Text>
|
||||
<Card.Text className='price-count'>22 998 руб.</Card.Text>
|
||||
<Button className='btn d-block mx-auto'>Перейти <br /> к оформлению</Button>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page3;
|
||||
Loading…
Reference in New Issue
Block a user