изменения

src/pages/ItemPage/ItemPage.tsx

@@ -6,6 +6,8 @@ import styles from "./ItemPage.module.css";
 import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
 import Button from "../../components/Button/Button";
 import PriceLisForm from "../../components/PriceLisForm/PriceLisForm";
+import ProductAttributes from "../../components/Table/ProducTable";
+import { p } from "framer-motion/client";
 
 const ItemPage = () => {
   const { id } = useParams();
@@ -39,10 +41,11 @@ const ItemPage = () => {
 
       <div className={styles.hero}>
         <div className={styles.left}>
-          <img src={product.image} alt={product.name} />
+          <img src={product.images[0]} alt={product.name} />
         </div>
 
         <div className={styles.right}>
+          <div className={styles.rightContent}>
           <div className={styles.breadcrumbs}>
             ГЛАВНАЯ / {category?.name} / {product.name}
           </div>
@@ -54,6 +57,7 @@ const ItemPage = () => {
             label="СКАЧАТЬ ПРАЙС-ЛИСТ"
             onClick={() => setOpen(true)}
           />
+          </div>
         </div>
       </div>
 
@@ -77,13 +81,21 @@ const ItemPage = () => {
           <div>
             <h2>ОПИСАНИЕ</h2>
             <p>{product.description}</p>
+            <p>{product.full_name}</p>
+            {!product.inStock? 
+              (
+                <p>в наличии</p>
+              ) : (
+                <p>нет в наличии</p>
+              )
+            }
           </div>
         )}
 
         {activeTab === "chars" && (
           <div>
             <h2>ХАРАКТЕРИСТИКИ</h2>
-            {category.atributes?.map((attr: CategoryAtributes) => (
+            {/*{product.attributes.map((attr) => (
               <div key={attr.id} className={styles.attrRow}>
                 <span>{attr.name}</span>
                 {attr.vals?.map((val: CategoryAtrVals) => (
@@ -92,7 +104,8 @@ const ItemPage = () => {
                   </div>
                 ))}
               </div>
-            ))}
+            ))}*/}
+            <ProductAttributes attributes={product.attributes}/>
           </div>
         )}
       </div>