50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { Review } from "@/types/product"
|
||
import { Star } from 'lucide-react'
|
||
import { useAuth } from "@/contexts/auth-context"
|
||
import Link from "next/link"
|
||
|
||
interface ReviewListProps {
|
||
reviews: Review[]
|
||
}
|
||
|
||
export function ReviewList({ reviews }: ReviewListProps) {
|
||
const { isLoggedIn } = useAuth()
|
||
|
||
if (!isLoggedIn) {
|
||
return (
|
||
<p className="text-gray-600">Чтобы просматривать отзывы, пожалуйста, <Link href="/login" className="text-blue-600 hover:underline">войдите в систему</Link>.</p>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-semibold">Отзывы покупателей</h3>
|
||
{reviews.length === 0 ? (
|
||
<p>Пока нет отзывов. Будьте первым!</p>
|
||
) : (
|
||
reviews.map((review) => (
|
||
<div key={review.id} className="border-b pb-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex">
|
||
{[1, 2, 3, 4, 5].map((star) => (
|
||
<Star
|
||
key={star}
|
||
className={`h-5 w-5 ${
|
||
star <= review.rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'
|
||
}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
<span className="text-sm text-gray-500">
|
||
{new Date(review.createdAt).toLocaleDateString()}
|
||
</span>
|
||
</div>
|
||
<p className="mt-2">{review.comment}</p>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|