mirror of
https://github.com/tailscale/tailscale.git
synced 2025-04-16 03:31:39 +00:00
d73e923b73
Initial addition of device details view on the frontend. A little more backend piping work to come to fill all of the detail fields, for now using placeholders. Updates tailscale/corp#14335 Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
32 lines
751 B
TypeScript
32 lines
751 B
TypeScript
import cx from "classnames"
|
|
import React from "react"
|
|
|
|
export default function ProfilePic({
|
|
url,
|
|
size = "medium",
|
|
}: {
|
|
url: string
|
|
size?: "small" | "medium"
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cx("relative flex-shrink-0 rounded-full overflow-hidden", {
|
|
"w-5 h-5": size === "small",
|
|
"w-8 h-8": size === "medium",
|
|
})}
|
|
>
|
|
{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>
|
|
)
|
|
}
|