feat(): Added ci restruct project and add dockerfile

src/pages/ItemPage/ItemPage.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { fetchProductById } from "../../features/catalog/productsSlice";
+import styles from "./ProductPage.module.css";
+import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
+
+const ItemPage = () => {
+    const { id } = useParams();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const { items, loading } = useAppSelector((state) => state.products);
+  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+
+  const [activeTab, setActiveTab] = useState<"desc" | "chars">("desc");
+
+  useEffect(() => {
+    if (id) dispatch(fetchProductById(id));
+  }, [id]);
+
+  const product = items.find((item) => item.id === Number(id));
+  const category = cats.find((cat) => cat.id === Number(selectedCategoryId))
+
+  if ((loading || !product)) return <div>Загрузка...</div>;
+  if(!category) return <div>Загрузка...</div>;
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.top}>
+        <button className={styles.back} onClick={() => navigate(-1)}>
+          ← НАЗАД В КАТАЛОГ
+        </button>
+      </div>
+
+      <div className={styles.hero}>
+        <div className={styles.left}>
+          <img src={product.image} alt={product.name} />
+        </div>
+
+        <div className={styles.right}>
+          <div className={styles.breadcrumbs}>
+            ГЛАВНАЯ / {category?.name} / {product.name}
+          </div>
+
+          <h1>{product.name}</h1>
+
+          <p className={styles.short}>{product.description}</p>
+
+          <button className={styles.download}>
+            СКАЧАТЬ ПРАЙС-ЛИСТ
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.tabs}>
+        <button
+          className={activeTab === "desc" ? styles.active : ""}
+          onClick={() => setActiveTab("desc")}
+        >
+          ОПИСАНИЕ
+        </button>
+        <button
+          className={activeTab === "chars" ? styles.active : ""}
+          onClick={() => setActiveTab("chars")}
+        >
+          ХАРАКТЕРИСТИКИ
+        </button>
+      </div>
+
+      <div className={styles.content}>
+        {activeTab === "desc" && (
+          <div>
+            <h2>ОПИСАНИЕ</h2>
+            <p>{product.description}</p>
+          </div>
+        )}
+
+        {activeTab === "chars" && (
+          <div>
+            <h2>ХАРАКТЕРИСТИКИ</h2>
+            {category.atributes?.map((attr: CategoryAtributes) => (
+              <div key={attr.id} className={styles.attrRow}>
+                <span>{attr.name}</span>
+                {attr.vals?.map((val: CategoryAtrVals) => (
+                  <div key={val.id}>
+                    <span>{val.val}</span>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ItemPage;