59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { format, parseISO } from 'date-fns';
|
|
import { Pencil, Trash2 } from 'lucide-react';
|
|
import RatingDisplay from './rating-display';
|
|
|
|
interface Props {
|
|
review: ExamReview;
|
|
onEdit?: (review: ExamReview) => void;
|
|
onDelete?: (review: ExamReview) => void;
|
|
}
|
|
|
|
const ReviewCard = ({ review, onEdit, onDelete }: Props) => {
|
|
const { auth } = usePage().props as any;
|
|
const isOwnReview = auth?.user?.id === review.user_id;
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1">
|
|
<div className="mb-2 flex items-center gap-3">
|
|
<div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold">
|
|
{review.user?.name?.charAt(0).toUpperCase() || 'U'}
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-gray-900">{review.user?.name || 'Anonymous'}</p>
|
|
<p className="text-xs text-gray-500">{format(parseISO(review.created_at), 'MMM dd, yyyy')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<RatingDisplay rating={review.rating} showCount={false} size="sm" className="mb-2" />
|
|
|
|
{review.review && <p className="text-sm text-gray-700">{review.review}</p>}
|
|
</div>
|
|
|
|
{isOwnReview && (onEdit || onDelete) && (
|
|
<div className="flex gap-2">
|
|
{onEdit && (
|
|
<Button variant="ghost" size="icon" onClick={() => onEdit(review)}>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
{onDelete && (
|
|
<Button variant="ghost" size="icon" onClick={() => onDelete(review)}>
|
|
<Trash2 className="h-4 w-4 text-red-600" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ReviewCard;
|