42 lines
945 B
TypeScript
42 lines
945 B
TypeScript
"use client";
|
|
|
|
/**
|
|
* Delivery ticks for your own messages: one for sent, two for delivered, two
|
|
* in blue for read.
|
|
*
|
|
* "Read" means read by everyone — the cursors behind it are the minimum across
|
|
* the other participants, so a group only turns blue once the last member has
|
|
* caught up.
|
|
*/
|
|
|
|
import { Check, CheckCheck } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { TickState } from "@/lib/chat-format";
|
|
|
|
const LABEL: Record<TickState, string> = {
|
|
sent: "Sent",
|
|
delivered: "Delivered",
|
|
read: "Read by everyone",
|
|
};
|
|
|
|
export function MessageTicks({
|
|
state,
|
|
className,
|
|
}: {
|
|
state: TickState;
|
|
className?: string;
|
|
}) {
|
|
const Icon = state === "sent" ? Check : CheckCheck;
|
|
return (
|
|
<Icon
|
|
role="img"
|
|
aria-label={LABEL[state]}
|
|
className={cn(
|
|
"size-3.5 shrink-0",
|
|
state === "read" ? "text-sky-500" : "text-muted-foreground",
|
|
className,
|
|
)}
|
|
/>
|
|
);
|
|
}
|