 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/public_html/src/components/ |
import React, { useState } from 'react';
import { formatDistanceToNow } from 'date-fns';
import { Star, Heart, Eye, Shield } from 'lucide-react';
import { TestimonialData } from '@/hooks/useTestimonials';
interface TestimonialsPanelProps {
testimonials: TestimonialData[];
reviews: TestimonialData[];
isLoading: boolean;
error: string | null;
}
const getImpactLevelColor = (impactLevel: string): string => {
switch (impactLevel) {
case 'LIFE_CHANGING':
return 'bg-purple-100 text-purple-800 border-purple-200';
case 'MAJOR':
return 'bg-green-100 text-green-800 border-green-200';
case 'MODERATE':
return 'bg-blue-100 text-blue-800 border-blue-200';
case 'MINOR':
return 'bg-yellow-100 text-yellow-800 border-yellow-200';
default:
return 'bg-gray-100 text-gray-800 border-gray-200';
}
};
const renderStars = (rating: number) => {
return Array.from({ length: 5 }).map((_, i) => (
<Star
key={i}
className={`h-4 w-4 ${i < rating ? 'text-yellow-400 fill-current' : 'text-gray-300'}`}
/>
));
};
export default function TestimonialsPanel({ testimonials, reviews, isLoading, error }: TestimonialsPanelProps) {
const [activeTab, setActiveTab] = useState<'testimonials' | 'reviews'>('testimonials');
if (isLoading) {
return (
<div className="space-y-4">
<div className="flex space-x-4 border-b">
<div className="h-8 bg-gray-200 rounded w-32 animate-pulse"></div>
<div className="h-8 bg-gray-200 rounded w-24 animate-pulse"></div>
</div>
<div className="space-y-3">
{[...Array(2)].map((_, i) => (
<div key={i} className="animate-pulse">
<div className="border border-gray-200 rounded-lg p-4">
<div className="flex items-start space-x-3">
<div className="w-12 h-12 bg-gray-200 rounded-full"></div>
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
<div className="h-3 bg-gray-200 rounded w-2/3"></div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
);
}
if (error) {
return (
<div className="text-center py-8">
<div className="text-red-500 text-2xl mb-2">⚠️</div>
<p className="text-red-600 font-medium">Error loading testimonials</p>
<p className="text-red-500 text-sm mt-1">{error}</p>
</div>
);
}
return (
<div>
{/* Tabs */}
<div className="flex space-x-4 border-b mb-4">
<button
onClick={() => setActiveTab('testimonials')}
className={`pb-2 px-1 ${
activeTab === 'testimonials'
? 'border-b-2 border-blue-500 text-blue-600 font-medium'
: 'text-gray-500 hover:text-gray-700'
}`}
>
Testimonials ({testimonials.length})
</button>
<button
onClick={() => setActiveTab('reviews')}
className={`pb-2 px-1 ${
activeTab === 'reviews'
? 'border-b-2 border-blue-500 text-blue-600 font-medium'
: 'text-gray-500 hover:text-gray-700'
}`}
>
Reviews ({reviews.length})
</button>
</div>
{/* Testimonials Tab */}
{activeTab === 'testimonials' && (
<div className="space-y-4">
{testimonials.length === 0 ? (
<div className="text-center py-8">
<div className="text-gray-400 text-4xl mb-3">💬</div>
<p className="text-gray-500 font-medium">No testimonials yet</p>
<p className="text-gray-400 text-sm mt-1">Client testimonials will appear here</p>
</div>
) : (
testimonials.map((testimonial) => (
<div
key={testimonial.id}
className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
>
<div className="flex items-start justify-between mb-3">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
{testimonial.client?.profilePicture ? (
<img
src={testimonial.client.profilePicture}
alt={testimonial.client.name}
className="w-10 h-10 rounded-full object-cover"
/>
) : (
<span className="text-purple-600 font-semibold">
{testimonial.client?.name?.charAt(0) || 'C'}
</span>
)}
</div>
<div>
<h4 className="font-semibold text-gray-900">{testimonial.title}</h4>
<p className="text-sm text-gray-600">
by {testimonial.client?.name || 'Anonymous'}
</p>
</div>
</div>
<div className="flex items-center space-x-2">
{testimonial.isFeatured && (
<span className="px-2 py-1 rounded-full text-xs font-medium text-yellow-600 bg-yellow-100">
Featured
</span>
)}
<span className={`px-2 py-1 rounded-full text-xs font-medium border ${getImpactLevelColor(testimonial.impactLevel)}`}>
{testimonial.impactLevel.replace('_', ' ')}
</span>
</div>
</div>
<blockquote className="text-gray-700 italic mb-3">
"{testimonial.content}"
</blockquote>
{testimonial.beforeSituation && testimonial.afterSituation && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
<div className="bg-red-50 p-3 rounded-lg">
<h5 className="font-medium text-red-800 mb-1 text-sm">Before</h5>
<p className="text-sm text-red-700">{testimonial.beforeSituation}</p>
</div>
<div className="bg-green-50 p-3 rounded-lg">
<h5 className="font-medium text-green-800 mb-1 text-sm">After</h5>
<p className="text-sm text-green-700">{testimonial.afterSituation}</p>
</div>
</div>
)}
<div className="flex items-center justify-between text-sm text-gray-500">
<span>{formatDistanceToNow(new Date(testimonial.createdAt), { addSuffix: true })}</span>
<div className="flex items-center space-x-4">
<span className="flex items-center space-x-1">
<Eye className="h-4 w-4" />
<span>{testimonial.views}</span>
</span>
<span className="flex items-center space-x-1">
<Heart className="h-4 w-4" />
<span>{testimonial.helpfulVotes}</span>
</span>
</div>
</div>
</div>
))
)}
</div>
)}
{/* Reviews Tab */}
{activeTab === 'reviews' && (
<div className="space-y-4">
{reviews.length === 0 ? (
<div className="text-center py-8">
<div className="text-gray-400 text-4xl mb-3">⭐</div>
<p className="text-gray-500 font-medium">No reviews written yet</p>
<p className="text-gray-400 text-sm mt-1">Reviews you write about lawyers will appear here</p>
</div>
) : (
reviews.map((review) => (
<div
key={review.id}
className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
>
<div className="flex items-start justify-between mb-3">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
{review.lawyer?.profilePicture ? (
<img
src={review.lawyer.profilePicture}
alt={review.lawyer.name}
className="w-10 h-10 rounded-full object-cover"
/>
) : (
<span className="text-blue-600 font-semibold">
{review.lawyer?.name?.charAt(0) || 'L'}
</span>
)}
</div>
<div>
<h4 className="font-semibold text-gray-900">{review.title}</h4>
<p className="text-sm text-gray-600">
about {review.lawyer?.name || 'Lawyer'}
</p>
</div>
</div>
<div className="flex items-center space-x-2">
<span className={`px-2 py-1 rounded-full text-xs font-medium border ${getImpactLevelColor(review.impactLevel)}`}>
{review.impactLevel.replace('_', ' ')}
</span>
</div>
</div>
<blockquote className="text-gray-700 italic mb-3">
"{review.content}"
</blockquote>
{review.case && (
<div className="mb-3">
<span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
⚖️ {review.case.title}
</span>
</div>
)}
<div className="flex items-center justify-between text-sm text-gray-500">
<span>{formatDistanceToNow(new Date(review.createdAt), { addSuffix: true })}</span>
<div className="flex items-center space-x-4">
<span className="flex items-center space-x-1">
<Eye className="h-4 w-4" />
<span>{review.views}</span>
</span>
<span className="flex items-center space-x-1">
<Heart className="h-4 w-4" />
<span>{review.helpfulVotes}</span>
</span>
</div>
</div>
</div>
))
)}
</div>
)}
</div>
);
}