Hugging Face's logo

Spaces:
arabdullah
/
chatty
Paused

App Files Community
chatty
File size: 1,417 Bytes 
a0fda44
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
import React from "react";

function MessageCheck({ readStatus, deliveredStatus, className }) {
  const computedClassName = `!fill-transparent !stroke-avatar-check ${className}`;
  // Message sent gives a single check
  const singleCheck = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 24 24"
      className="w-[1.4rem] h-[1.4rem]"
    >
      <path
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        d="m4 12l6 6L20 6"
        className={computedClassName}
      />
    </svg>
  );

  // Message delivered gives double check, message read gives a colored double check
  const doubleCheck = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 32 32"
      className="w-[1.6rem] h-[1.6rem]"
    >
      <path
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        d="m4 17l5 5l12-12m-5 10l2 2l12-12"
        className={`${computedClassName} ${
          readStatus && "!stroke-avatar-check-read"
        }`}
      />
    </svg>
  );

  return <span>{deliveredStatus ? doubleCheck : singleCheck}</span>;
}

export default MessageCheck;