63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
import { formatDistanceToNow } from "date-fns"
|
|
import { ptBR } from "date-fns/locale"
|
|
import { IconLock, IconMessage } from "@tabler/icons-react"
|
|
|
|
import type { TicketWithDetails } from "@/lib/schemas/ticket"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
|
|
interface TicketCommentsProps {
|
|
ticket: TicketWithDetails
|
|
}
|
|
|
|
export function TicketComments({ ticket }: TicketCommentsProps) {
|
|
return (
|
|
<Card className="border-none shadow-none">
|
|
<CardHeader className="px-0">
|
|
<CardTitle className="flex items-center gap-2 text-lg font-semibold">
|
|
<IconMessage className="size-5" /> Conversa
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6 px-0">
|
|
{ticket.comments.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
Ainda sem comentarios. Que tal registrar o proximo passo?
|
|
</p>
|
|
) : (
|
|
ticket.comments.map((comment) => {
|
|
const initials = comment.author.name
|
|
.split(" ")
|
|
.slice(0, 2)
|
|
.map((part) => part[0]?.toUpperCase())
|
|
.join("")
|
|
return (
|
|
<div key={comment.id} className="flex gap-3">
|
|
<Avatar className="size-9">
|
|
<AvatarImage src={comment.author.avatarUrl} alt={comment.author.name} />
|
|
<AvatarFallback>{initials}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex flex-wrap items-center gap-2 text-sm">
|
|
<span className="font-medium text-foreground">{comment.author.name}</span>
|
|
{comment.visibility === "INTERNAL" ? (
|
|
<Badge variant="outline" className="gap-1">
|
|
<IconLock className="size-3" /> Interno
|
|
</Badge>
|
|
) : null}
|
|
<span className="text-xs text-muted-foreground">
|
|
{formatDistanceToNow(comment.createdAt, { addSuffix: true, locale: ptBR })}
|
|
</span>
|
|
</div>
|
|
<div className="rounded-lg border border-dashed bg-card px-3 py-2 text-sm leading-relaxed text-muted-foreground">
|
|
{comment.body}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|