webhook-multitool/src/components/embed-preview.tsx at main · appdoze/webhook-multitool · GitHub

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import Image from "next/image";

interface EmbedPreviewProps {
  title?: string;
  description?: string;
  color?: string;
  author?: string;
  authorIcon?: string;
  footer?: string;
  footerIcon?: string;
  thumbnail?: string;
  image?: string;
}

export function EmbedPreview({
  title,
  description,
  color = "#5865F2",
  author,
  authorIcon,
  footer,
  footerIcon,
  thumbnail,
  image,
}: EmbedPreviewProps) {
  return (
    <div
      className="rounded-md overflow-hidden max-w-[520px]"
      style={{ borderLeft: `4px solid ${color}` }}
    >
      <div className="bg-[#2f3136] p-3 rounded-tr-md rounded-br-md">
        {author && (
          <div className="flex items-center gap-2 mb-2">
            {authorIcon && (
              <Image src={authorIcon} alt="" className="rounded-full" height={6} width={6}/>
            )}
            <span className="text-sm font-medium">{author}</span>
          </div>
        )}

        <div className="flex">
          <div className="flex-1" style={{ wordBreak: "break-word" }}>
            {title && <div className="font-semibold mb-1">{title}</div>}
            {description && (
              <div
                className="text-sm text-gray-300 whitespace-pre-wrap"
              >
                {description}
              </div>
            )}

            {image && (
              <div className="mt-3">
                <Image
                  src={image}
                  alt=""
                  className="max-w-full rounded-md max-h-[300px] object-contain"
                />
              </div>
            )}

            {footer && (
              <div className="flex items-center gap-2 mt-3 text-xs text-gray-400">
                {footerIcon && (
                  <Image
                    src={footerIcon}
                    alt=""
                    className="rounded-full"
                    width={5}
                    height={5}
                  />
                )}
                <span>{footer}</span>
              </div>
            )}
          </div>

          {thumbnail && (
            <div className="ml-4">
              <Image
                src={thumbnail}
                alt=""
                className="object-cover rounded-md"
                height={20}
                width={20}
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}