fix(front) Добавил строку категорий и карточек товара

2026-06-09 17:30:21 +03:00
parent 04b1be4c54
commit f325b6b31f
5 changed files with 145 additions and 11 deletions
@@ -0,0 +1,80 @@
+import  { useState } from 'react';
+
+export default function CardItem({ item, onAddToCart }) {
+  // Начальный вес — 100 грамм (0.100 кг)
+  const [weight, setWeight] = useState(0.100);
+
+  // Увеличение веса с шагом 100 грамм
+  const handleIncrement = () => {
+    setWeight((prev) => parseFloat((prev + 0.100).toFixed(3)));
+  };
+
+  // Уменьшение веса (не позволяет опуститься ниже минимальных 100 грамм)
+  const handleDecrement = () => {
+    setWeight((prev) => (prev > 0.100 ? parseFloat((prev - 0.100).toFixed(3)) : 0.100));
+  };
+
+  return (
+    <div className="flex flex-col text-white w-full max-w-[360px] bg-slate-900/40 p-4 rounded-lg border border-slate-800 hover:border-slate-700 transition-all">
+      
+      {/* Заглушка для изображения товара */}
+      <div className="w-full aspect-[4/5] rounded-md overflow-hidden bg-slate-800/60 flex flex-col items-center justify-center border border-slate-700/50 select-none">
+        <svg className="w-12 h-12 text-slate-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 002-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+        <span className="text-xs text-slate-500 font-medium uppercase tracking-wider">
+          Изображение товара
+        </span>
+      </div>
+      
+      {/* Блок с информацией о товаре */}
+      <div className="mt-4 flex justify-between items-start grow">
+        <div>
+          <h3 className="font-bold text-lg tracking-wide">{item.name}</h3>
+          {item.origin && <p className="text-slate-500 text-sm mt-0.5">{item.origin}</p>}
+        </div>
+        <div className="text-right">
+          <span className="font-bold text-lg">
+            {Number(item.price || 0).toLocaleString('ru-RU')} ₽
+          </span>
+          <span className="text-slate-400 text-sm"> / {item.unit || 'кг'}</span>
+        </div>
+      </div>
+
+      {/* Инпут управления весом и кнопка добавления */}
+      <div className="mt-6 flex items-center justify-between gap-4">
+        
+        {/* Шаговый переключатель веса */}
+        <div className="flex items-center bg-amber-500/10 border border-amber-500/30 rounded-full px-2 py-1 text-amber-500">
+          <button 
+            onClick={handleDecrement}
+            className="w-8 h-8 flex items-center justify-center font-bold text-lg hover:text-amber-400 cursor-pointer select-none"
+          >
+            -
+          </button>
+          <span className="mx-2 font-mono text-sm min-w-[50px] text-center">
+            {weight.toFixed(3)}
+          </span>
+          <button 
+            onClick={handleIncrement}
+            className="w-8 h-8 flex items-center justify-center font-bold text-lg hover:text-amber-400 cursor-pointer select-none"
+          >
+            +
+          </button>
+        </div>
+
+        {/* Кнопка действия "В корзину" */}
+        <button 
+          onClick={() => onAddToCart(item, weight)}
+          className="group flex items-center gap-2 text-sm font-medium tracking-wide text-slate-300 hover:text-amber-400 transition-colors cursor-pointer"
+        >
+          <span>В корзину</span>
+          <svg className="w-5 h-5 stroke-current transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+          </svg>
+        </button>
+
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,38 @@
+import PropTypes from "prop-types";
+
+export default function CategoryTabs({
+  categories,
+  activeCategory,
+  onSelectCategory,
+}) {
+  return (
+    <div className="flex flex-wrap justify-center md:justify-start gap-6 md:gap-8 my-15 text-sm font-medium tracking-wider text-slate-400 ">
+      <button
+        className={`uppercase transition-colors duration-200 hover:text-white cursor-pointer ${activeCategory === "all"
+            ? "text-white border-b-2 border-gold pb-1"
+            : ""
+          }`}
+      >
+        все
+      </button>
+      {categories.map((cat) => (
+        <button
+          key={cat}
+          onClick={() => onSelectCategory(cat)}
+          className={`uppercase transition-colors duration-200 hover:text-white cursor-pointer ${activeCategory === cat
+              ? "text-white border-b-2 border-gold pb-1"
+              : ""
+            }`}
+        >
+          {cat}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+CategoryTabs.propTypes = {
+  categories: PropTypes.arrayOf(PropTypes.string).isRequired,
+  activeCategory: PropTypes.string.isRequired,
+  onSelectCategory: PropTypes.func.isRequired,
+};