reviews + UI

frontend/style/components/product-detail.tsx

@@ -2,11 +2,11 @@
 
 import Image from "next/image"
 import { useState } from "react"
-import { Heart, ShoppingCart, Minus, Plus } from 'lucide-react'
+import { Heart, ShoppingCart, Minus, Plus } from "lucide-react"
 import { Button } from "./ui/button"
 import { useCart } from "@/contexts/cart-context"
 import { useFavorites } from "@/contexts/favorites-context"
-import { Product } from "@/types/product"
+import type { Product } from "@/types/product"
 import { ReviewList } from "./review-list"
 import { ReviewForm } from "./review-form"
 import { useAuth } from "@/contexts/auth-context"
@@ -22,15 +22,18 @@ export function ProductDetail({ product }: ProductDetailProps) {
   const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
   const { isLoggedIn } = useAuth()
 
-  const isInCart = items.some(item => item.id === product.id)
+  const isInCart = items.some((item) => item.id === product.id)
 
   const handleAddToCart = () => {
     if (!isInCart) {
-      addToCart({
-        id: product.id,
-        title: product.title,
-        price: product.price,
-      }, quantity)
+      addToCart(
+        {
+          id: product.id,
+          title: product.title,
+          price: product.price,
+        },
+        quantity,
+      )
     }
   }
 
@@ -51,7 +54,7 @@ export function ProductDetail({ product }: ProductDetailProps) {
       <div className="flex flex-col md:flex-row gap-8">
         <div className="md:w-1/2">
           <Image
-            src={product.image}
+            src={product.images?.[0] || "/placeholder.svg"}
             alt={product.title}
             width={500}
             height={500}
@@ -60,9 +63,9 @@ export function ProductDetail({ product }: ProductDetailProps) {
         </div>
         <div className="md:w-1/2 space-y-4">
           <h1 className="text-3xl font-bold">{product.title}</h1>
-          {product.category === 'software' && (
+          {product.category === "software" && (
             <div className="text-sm text-muted-foreground">
-              Тип лицензии: {product.licenseType === 'perpetual' ? 'Бессрочная' : 'Подписка'}
+              Тип лицензии: {product.licenseType === "perpetual" ? "Бессрочная" : "Подписка"}
             </div>
           )}
           <div className="flex items-baseline gap-2">
@@ -72,19 +75,11 @@ export function ProductDetail({ product }: ProductDetailProps) {
             {!isInCart && (
               <>
                 <div className="flex items-center gap-2">
-                  <Button 
-                    variant="outline" 
-                    size="icon"
-                    onClick={() => setQuantity(prev => Math.max(1, prev - 1))}
-                  >
+                  <Button variant="outline" size="icon" onClick={() => setQuantity((prev) => Math.max(1, prev - 1))}>
                     <Minus className="h-4 w-4" />
                   </Button>
                   <span className="w-8 text-center">{quantity}</span>
-                  <Button 
-                    variant="outline" 
-                    size="icon"
-                    onClick={() => setQuantity(prev => prev + 1)}
-                  >
+                  <Button variant="outline" size="icon" onClick={() => setQuantity((prev) => prev + 1)}>
                     <Plus className="h-4 w-4" />
                   </Button>
                 </div>
@@ -99,13 +94,14 @@ export function ProductDetail({ product }: ProductDetailProps) {
               </Button>
             )}
             <Button variant="outline" size="icon" onClick={handleToggleFavorite}>
-              <Heart className={`h-5 w-5 ${isFavorite(product.id) ? 'fill-red-500 text-red-500' : ''}`} />
+              <Heart className={`h-5 w-5 ${isFavorite(product.id) ? "fill-red-500 text-red-500" : ""}`} />
             </Button>
           </div>
           <div className="border-t pt-4">
             <h2 className="text-xl font-semibold mb-2">Описание</h2>
             <p className="text-gray-600">
-              {product.description || 'Подробное описание товара. Здесь может быть длинный текст с характеристиками и особенностями продукта.'}
+              {product.description ||
+                "Подробное описание товара. Здесь может быть длинный текст с характеристиками и особенностями продукта."}
             </p>
           </div>
         </div>
@@ -114,14 +110,20 @@ export function ProductDetail({ product }: ProductDetailProps) {
         <h2 className="text-2xl font-bold mb-4">Отзывы</h2>
         {isLoggedIn ? (
           <>
-            <ReviewList reviews={product.reviews} />
+            <ReviewList productId={product.id} />
             <div className="mt-8">
               <h3 className="text-xl font-semibold mb-4">Оставить отзыв</h3>
               <ReviewForm productId={product.id} />
             </div>
           </>
         ) : (
-          <p className="text-gray-600">Чтобы просматривать и оставлять отзывы, пожалуйста, <Link href="/login" className="text-blue-600 hover:underline">войдите в систему</Link>.</p>
+          <p className="text-gray-600">
+            Чтобы просматривать и оставлять отзывы, пожалуйста,{" "}
+            <Link href="/login" className="text-blue-600 hover:underline">
+              войдите в систему
+            </Link>
+            .
+          </p>
         )}
       </div>
     </div>