55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
import { useTranslation } from "react-i18next"
|
|
import { Globe, Users } from "lucide-react"
|
|
import { StarDisplay } from "@/components/star-display"
|
|
import { WatchMediumBadge } from "@/components/watch-medium-badge"
|
|
import { EmptyState } from "@/components/empty-state"
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
|
import { timeAgo } from "@/lib/date"
|
|
import type { SocialReviewDto } from "@/features/movies"
|
|
|
|
export function CommunityReviews({ reviews, onShowDetail }: { reviews: { items: SocialReviewDto[] }; onShowDetail?: (review: SocialReviewDto) => void }) {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<section>
|
|
<h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("movie.community")}</h3>
|
|
{!reviews.items.length ? (
|
|
<EmptyState icon={Users} title={t("movie.noReviews")} description={t("movie.beFirst")} />
|
|
) : (
|
|
<div className="space-y-2">
|
|
{reviews.items.map((r, i) => (
|
|
<Card key={i} size="sm">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-1.5 text-sm">
|
|
{r.user_display}
|
|
{r.is_federated && <Globe className="size-3 text-muted-foreground/60" />}
|
|
</CardTitle>
|
|
<CardDescription className="text-[10px]">{timeAgo(r.watched_at)}</CardDescription>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<StarDisplay rating={r.rating} size="xs" />
|
|
{r.watch_medium && <WatchMediumBadge medium={r.watch_medium} />}
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
{r.comment && (
|
|
<CardContent>
|
|
<p
|
|
className="text-xs text-muted-foreground"
|
|
role={onShowDetail ? "button" : undefined}
|
|
tabIndex={onShowDetail ? 0 : undefined}
|
|
onClick={onShowDetail ? () => onShowDetail(r) : undefined}
|
|
onKeyDown={onShowDetail ? (e) => e.key === "Enter" && onShowDetail(r) : undefined}
|
|
>{r.comment}</p>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|