Deforest6342/fishfish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(front)

Browse Source
This commit is contained in:
LeonG11
2026-06-10 17:55:44 +03:00
parent ef5ee1ef99
commit a0481f74b2
2 changed files with 54 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CardItem.jsx
+48 -40
View File
@@ -1,79 +1,87 @@
import { useState } from 'react';
import { useState } from "react";
import Arrow from "../components/Arrow";
export default function CardItem({ item, onAddToCart }) {
// Начальный вес — 100 грамм (0.100 кг)
const [weight, setWeight] = useState(0.100);
const [weight, setWeight] = useState(0.1);
// Увеличение веса с шагом 100 грамм
const handleIncrement = () => {
setWeight((prev) => parseFloat((prev + 0.100).toFixed(3)));
setWeight((prev) => parseFloat((prev + 0.1).toFixed(3)));
};
// Уменьшение веса (не позволяет опуститься ниже минимальных 100 грамм)
const handleDecrement = () => {
setWeight((prev) => (prev > 0.100 ? parseFloat((prev - 0.100).toFixed(3)) : 0.100));
setWeight((prev) =>
prev > 0.1 ? parseFloat((prev - 0.1).toFixed(3)) : 0.1,
);
};
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" />
<div className="flex flex-col text-white w-full">
<div className="w-full rounded-md overflow-hidden bg-slate-800/60 flex flex-col h-100 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="mt-8 flex justify-between items-start grow">
<div className="font-bold text-xl">{item.name}</div>
<div className="text-right">
<span className="font-bold text-lg">
{Number(item.price || 0).toLocaleString('ru-RU')} ₽
<span className="font-medium text-lg">
{Number(item.price || 0).toLocaleString("ru-RU")} ₽
</span>
<span className="text-slate-400 text-sm"> / {item.unit || 'кг'}</span>
<span className="text-white text-xl"> / {item.unit || "кг"}</span>
</div>
</div>
<div className="mt-8 lg:mt-2 items-start ">
<span className="text-white text-lg font-medium lg:font-light">
{item.city || "Архангельск"}
</span>
</div>
{/* Инпут управления весом и кнопка добавления */}
<div className="mt-6 flex items-center justify-between gap-4">
<div className="mt-9 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
<div className="flex items-center bg-gold rounded-md px-2 py-2 text-white">
<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"
className="w-3 h-3 flex items-center justify-center font-medium text-xl cursor-pointer select-none"
>
+
</button>
<span className="mx-2 font-mono text-sm min-w-12.5 text-center">
{weight.toFixed(3)}
</span>
<button
onClick={handleDecrement}
className="w-3 h-3 flex items-center justify-center font-medium text-xl cursor-pointer select-none"
>
-
</button>
</div>
{/* Кнопка действия "В корзину" */}
<button
<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"
className="group flex items-center gap-4.5 text-base font-bold text-white 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>
<Arrow />
</button>
</div>
</div>
);