лаба5, товары отображаются в каталоге и оттуда добавляются в корзину

laba5/src/components/Card.css

@@ -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;
+}

laba5/src/components/Card.jsx

@@ -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,
+  };

laba5/src/components/cart/Cart.css

@@ -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;
 }

laba5/src/components/lines/table/LinesTableRowForCatalog.jsx

@@ -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;

laba5/src/main.jsx

@@ -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 />,

laba5/src/pages/Page2.jsx

@@ -1,15 +1,16 @@
-import { Link } from 'react-router-dom';
+// import { Link } from 'react-router-dom';
-import Table1 from '../assets/table1.png';
+// import Table1 from '../assets/table1.png';
-import Table2 from '../assets/table2.png';
+// import Table2 from '../assets/table2.png';
-import Table3 from '../assets/table3.png';
+// import Table3 from '../assets/table3.png';
-import Chair1 from '../assets/chair1.png';
+// import Chair1 from '../assets/chair1.png';
-import Chair2 from '../assets/chair2.png';
+// import Chair2 from '../assets/chair2.png';
-import Chair3 from '../assets/chair3.png';
+// import Chair3 from '../assets/chair3.png';
-import Sofa1 from '../assets/sofa1.png';
+// import Sofa1 from '../assets/sofa1.png';
-import Sofa2 from '../assets/sofa2.png';
+// import Sofa2 from '../assets/sofa2.png';
-import Sofa3 from '../assets/sofa3.png';
+// import Sofa3 from '../assets/sofa3.png';
-import './Page2.css';
+// 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>
         </>
     );

laba5/src/pages/Page3.css

@@ -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;
-  }

laba5/src/pages/Page3.jsx

@@ -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;