first commit

components/ProductCard.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useState, MouseEvent } from "react";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Heart, HeartOff, Minus, Plus } from "lucide-react";
+import Image, { StaticImageData } from "next/image";
+type ProductCardProps = {
+  id: number;
+  name: string;
+  price: number | null;
+  struct_price_text: string;
+  discount?: number | null;
+  discount_text?: string | null;
+  images: (StaticImageData | string)[];
+  is_favorite: boolean;
+  labels?: { text: string; bg_color: string }[];
+  price_color?: string;
+  height?: number;
+  width?: number;
+  button?: boolean;
+};
+
+export default function ProductCard({
+  id,
+  name,
+  price,
+  struct_price_text,
+  discount,
+  discount_text,
+  images,
+  is_favorite,
+  labels = [],
+  price_color = "#005bff",
+  height = 360,
+  width = 280,
+  button = true,
+}: ProductCardProps) {
+  const [favorite, setFavorite] = useState(is_favorite);
+  const [cart, setCart] = useState(false);
+  const [count, setCount] = useState(1);
+
+  const handleFavorite = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setFavorite((prev) => !prev);
+  };
+
+  const handleAddToCart = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setCart(true);
+  };
+
+  const handleIncrement = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setCount((c) => c + 1);
+  };
+
+  const handleDecrement = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setCount((c) => (c > 1 ? c - 1 : c));
+  };
+
+  return (
+    <Link href={`/product/${id}`} className="no-underline">
+      <Card
+        className={`relative gap-2 border-none shadow-none! p-0 w-full max-w-[${width}px] overflow-hidden rounded-2xl  hover:shadow-md transition-all cursor-pointer`}
+        style={{ height }}
+      >
+        {/* Image Section */}
+        <div className="relative w-full h-[260px] ">
+          {images?.[0] && (
+            <Image
+              src={images[0]}
+              alt={name}
+              fill
+              sizes="(max-width: 600px) 100vw, 33vw"
+              className="object-contain "
+              priority
+            />
+          )}
+
+          {/* Favorite Button */}
+          <button
+            onClick={handleFavorite}
+            className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white"
+          >
+            {favorite ? (
+              <Heart className="w-5 h-5 text-red-500 fill-red-500" />
+            ) : (
+              <Heart className="w-5 h-5 text-gray-700" />
+            )}
+          </button>
+
+          {/* Labels */}
+          {labels?.length > 0 && (
+            <div className="absolute bottom-2 left-2 flex flex-col gap-1">
+              {labels.map((label) => (
+                <Badge
+                  key={label.text}
+                  className="text-white text-[10px] font-bold uppercase rounded-r-md"
+                  style={{ backgroundColor: label.bg_color }}
+                >
+                  {label.text}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <CardContent className="p-0 space-y-1">
+          <p
+            className="text-sm font-semibold mx-2"
+            style={{ color: price_color }}
+          >
+            {struct_price_text}
+          </p>
+          <p className="text-gray-800 text-sm truncate mx-2">{name}</p>
+        </CardContent>
+
+        {/* Buttons */}
+        {/* {button && (
+          <div className="p-3">
+            {!cart ? (
+              <Button
+                className="w-full font-bold text-base rounded-xl"
+                onClick={handleAddToCart}
+              >
+                Заказать
+              </Button>
+            ) : (
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={handleDecrement}
+                  disabled={count === 1}
+                  className="rounded-xl"
+                >
+                  <Minus className="w-4 h-4" />
+                </Button>
+                <div className="flex-1 text-center text-gray-700 border rounded-xl py-2">
+                  {count}
+                </div>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={handleIncrement}
+                  className="rounded-xl"
+                >
+                  <Plus className="w-4 h-4" />
+                </Button>
+              </div>
+            )}
+          </div>
+        )} */}
+      </Card>
+    </Link>
+  );
+}