123 lines
4.2 KiB
TypeScript
123 lines
4.2 KiB
TypeScript
import StarRating from './StarRating';
|
|
|
|
interface Review {
|
|
id: string;
|
|
rating: number;
|
|
title?: string;
|
|
comment: string;
|
|
user: { name: string; avatar_url?: string };
|
|
created_at: string;
|
|
images?: string[];
|
|
}
|
|
|
|
interface ReviewListProps {
|
|
reviews: Review[];
|
|
productId?: string;
|
|
onLoadMore?: () => void;
|
|
hasMore?: boolean;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export default function ReviewList({
|
|
reviews,
|
|
productId,
|
|
onLoadMore,
|
|
hasMore = false,
|
|
isLoading = false
|
|
}: ReviewListProps) {
|
|
if (!reviews?.length) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
|
|
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="font-medium text-gray-900 mb-1">ยังไม่มีรีวิว</h3>
|
|
<p className="text-gray-500 text-sm">เป็นคนแรกที่รีวิวสินค้านี้</p>
|
|
<a
|
|
href={`#write-review${productId ? `?productId=${productId}` : ''}`}
|
|
className="mt-4 inline-block text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
>
|
|
เขียนรีวิว
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{reviews.map(review => (
|
|
<div key={review.id} className="border-b pb-6 last:border-b-0">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden">
|
|
{review.user.avatar_url ? (
|
|
<img
|
|
src={review.user.avatar_url}
|
|
alt={review.user.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<span className="text-gray-500 font-medium">
|
|
{review.user.name.charAt(0).toUpperCase()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-gray-900">{review.user.name}</p>
|
|
<StarRating rating={review.rating} size={14} />
|
|
</div>
|
|
</div>
|
|
<span className="text-sm text-gray-500">
|
|
{new Date(review.created_at).toLocaleDateString('th-TH', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</span>
|
|
</div>
|
|
|
|
{review.title && (
|
|
<h4 className="font-medium text-gray-900 mb-1">{review.title}</h4>
|
|
)}
|
|
|
|
<p className="text-gray-600 leading-relaxed">{review.comment}</p>
|
|
|
|
{review.images && review.images.length > 0 && (
|
|
<div className="flex gap-2 mt-4 overflow-x-auto pb-2">
|
|
{review.images.map((img, i) => (
|
|
<a
|
|
key={i}
|
|
href={img}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex-shrink-0"
|
|
>
|
|
<img
|
|
src={img}
|
|
alt={`รูปรีวิว ${i + 1}`}
|
|
className="w-20 h-20 object-cover rounded-lg hover:opacity-80 transition-opacity"
|
|
/>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{hasMore && (
|
|
<div className="text-center pt-4">
|
|
<button
|
|
onClick={onLoadMore}
|
|
disabled={isLoading}
|
|
className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
{isLoading ? 'กำลังโหลด...' : 'ดูรีวิวเพิ่มเติม'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|