39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { Card, CardContent, CardHeader } from "@/components/ui/card"
|
|
import { StarRating } from "@/components/ui/star-rating"
|
|
import { formatDistanceToNow } from "date-fns"
|
|
|
|
interface Review {
|
|
id: number
|
|
user_id: number
|
|
blurb: string
|
|
content: string
|
|
score: number
|
|
created_at: string
|
|
}
|
|
|
|
interface ReviewCardProps {
|
|
review: Review
|
|
}
|
|
|
|
export function ReviewCard({ review }: ReviewCardProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<div className="flex justify-between items-start">
|
|
<div className="space-y-1">
|
|
<h3 className="font-bold text-lg italic">"{review.blurb}"</h3>
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<span>User #{review.user_id}</span>
|
|
<span>•</span>
|
|
<span>{formatDistanceToNow(new Date(review.created_at), { addSuffix: true })}</span>
|
|
</div>
|
|
</div>
|
|
<StarRating value={review.score} readonly />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm leading-relaxed whitespace-pre-wrap">{review.content}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|