client/web/src/ui/profile-pic.tsx


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

// Copyright (c) Tailscale Inc & contributors
// SPDX-License-Identifier: BSD-3-Clause

import cx from "classnames"
import React from "react"

export default function ProfilePic({
  url,
  size = "large",
  className,
}: {
  url?: string
  size?: "small" | "medium" | "large"
  className?: string
}) {
  return (
    <div
      className={cx(
        "relative flex-shrink-0 rounded-full overflow-hidden",
        {
          "w-5 h-5": size === "small",
          "w-[26px] h-[26px]": size === "medium",
          "w-8 h-8": size === "large",
        },
        className
      )}
    >
      {url ? (
        <div
          className="w-full h-full flex pointer-events-none rounded-full bg-gray-200"
          style={{
            backgroundImage: `url(${url})`,
            backgroundSize: "cover",
          }}
        />
      ) : (
        <div className="w-full h-full flex pointer-events-none rounded-full border border-gray-400 border-dashed" />
      )}
    </div>
  )
}