dub/apps/web/ui/partners/partner-platform-card.tsx at 1e907393ec1713d33a5aa9cd06809a64f0b5a80a · dubinc/dub · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import {
  ArrowUpRight,
  BadgeCheck2,
  Button,
  Icon,
  Tooltip,
  Trash,
} from "@dub/ui";
import { cn } from "@dub/utils";
import { MouseEventHandler, PropsWithChildren } from "react";

export function PartnerPlatformCard({
  icon: Icon,
  prefix,
  value,
  verified,
  info,
  href,
  onRemove,
  onVerify,
  isVerifying = false,
}: {
  icon: Icon;
  prefix?: string;
  value: string;
  verified?: boolean;
  info?: string[];
  href?: string;
  onRemove?: () => void;
  onVerify?: () => void;
  isVerifying?: boolean;
}) {
  const onVerifyClick: MouseEventHandler<HTMLButtonElement> = (e) => {
    e.preventDefault();
    e.stopPropagation();
    onVerify?.();
  };

  return (
    <Container
      href={href}
      className={cn(
        "border-subtle group flex items-center justify-between gap-3 rounded-lg border bg-white p-3",
        href && "transition-colors hover:bg-neutral-50 active:bg-neutral-100",
      )}
    >
      <div className="flex min-w-0 items-center gap-3">
        <div className="border-subtle flex size-8 shrink-0 items-center justify-center rounded-full border">
          <Icon className="size-4" />
        </div>
        <div className="flex min-w-0 flex-col text-xs">
          <div className="flex items-center gap-1">
            <span className="text-content-emphasis block min-w-0 truncate font-semibold">
              {prefix}
              {value}
            </span>
            {verified && (
              <Tooltip content="Verified" disableHoverableContent>
                <div className="shrink-0">
                  <BadgeCheck2
                    variant="fill"
                    className="size-3.5 text-green-600"
                  />
                </div>
              </Tooltip>
            )}
          </div>
          {info && info.length > 0 && (
            <div className="text-content-subtle min-w-0 truncate font-medium">
              {info.join(" • ")}
            </div>
          )}
        </div>
      </div>
      {onVerify && !verified ? (
        <Button
          variant="outline"
          text="Verify"
          className="h-8 w-fit px-2.5 text-xs"
          loading={isVerifying}
          onClick={onVerifyClick}
        />
      ) : onRemove ? (
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            icon={<Trash className="size-4" />}
            className="text-content-subtle hover:text-content-default size-8 p-0"
            onClick={onRemove}
          />
        </div>
      ) : (
        <ArrowUpRight className="text-content-subtle mr-1 size-4 -translate-x-0.5 translate-y-0.5 opacity-0 transition-[opacity,transform] group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100" />
      )}
    </Container>
  );
}

const Container = ({
  href,
  children,
  ...rest
}: PropsWithChildren<{ href?: string; className?: string }>) => {
  return href ? (
    <a href={href} target="_blank" rel="noopener noreferrer" {...rest}>
      {children}
    </a>
  ) : (
    <div {...rest}>{children}</div>
  );
};