Message Status

1"use client";
2 
3import * as React from "react";
4import "@/components/ui/whatsapp/styles/whatsapp.css";
5 
6export type MessageStatus = "sending" | "sent" | "delivered" | "read" | "failed";
7 
8function CheckIcon({ className }: { className?: string }) {
9  return (
10    <svg viewBox="0 0 16 11" height="11" width="16" className={className}>
11      <path d="M11.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-2.011-2.175a.463.463 0 0 0-.349-.158.467.467 0 0 0-.338.131.537.537 0 0 0-.14.353.54.54 0 0 0 .13.363l2.39 2.576a.465.465 0 0 0 .349.158.457.457 0 0 0 .368-.189l6.596-8.14a.504.504 0 0 0 .103-.36.516.516 0 0 0-.223-.271z" fill="currentColor" />
12    </svg>
13  );
14}
15 
16function DoubleCheckIcon({ className }: { className?: string }) {
17  return (
18    <svg viewBox="0 0 16 11" height="11" width="16" className={className}>
19      <path d="M11.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-2.011-2.175a.463.463 0 0 0-.349-.158.467.467 0 0 0-.338.131.537.537 0 0 0-.14.353.54.54 0 0 0 .13.363l2.39 2.576a.465.465 0 0 0 .349.158.457.457 0 0 0 .368-.189l6.596-8.14a.504.504 0 0 0 .103-.36.516.516 0 0 0-.223-.271z" fill="currentColor" />
20      <path d="M15.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-1.2-1.298-.728.897 1.58 1.704a.465.465 0 0 0 .349.158.457.457 0 0 0 .368-.189l6.596-8.14a.504.504 0 0 0 .103-.36.516.516 0 0 0-.193-.484z" fill="currentColor" />
21    </svg>
22  );
23}
24 
25/** Renders the appropriate status icon for a given MessageStatus. */
26export function MessageStatusIcon({ status }: { status: MessageStatus }) {
27  switch (status) {
28    case "sending":
29    case "sent":
30      return <span className="text-wa-delivered opacity-75"><CheckIcon /></span>;
31    case "delivered":
32      return <span className="text-wa-delivered"><DoubleCheckIcon /></span>;
33    case "read":
34      return <span className="text-wa-read"><DoubleCheckIcon /></span>;
35    case "failed":
36      return (
37        <span className="text-wa-text-critical">
38          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
39            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
40          </svg>
41        </span>
42      );
43  }
44}