CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/frontend/components/anthropic-avatar.tsx
Views: 687
1
import { CSS } from "@cocalc/frontend/app-framework";

2


3
// The base64 encoded png is exactly the Anthropic icon from their website, with transparent background, and compressed using pngnq.

4
// Why? Importing it from a file and including it causes a nextjs error.

5


6
export default function AnthropicAvatar({

7
  size = 64,

8
  style,

9
  backgroundColor = "transparent",

10
}: {

11
  size: number;

12
  style?: CSS;

13
  backgroundColor?: string;

14
}) {

15
  return (

16
    <div

17
      style={{

18
        width: size,

19
        height: size,

20
        display: "inline-block",

21
        position: "relative",

22
        ...style,

23
      }}

24
    >

25
      <div

26
        style={{

27
          position: "absolute",

28
          backgroundColor,

29
          color: "white",

30
          height: size,

31
          top: "0px",

32
        }}

33
      >

34
        <img

35
          alt="Anthropic AI Icon"

36
          width={size}

37
          height={size}

38
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAACUCAMAAABC4vDmAAADAFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////+/v7+/v78/Pz8/Pz6+vr6+vr4+Pj4+Pj39/f19fX19fXz8/Pz8/Px8fHx8fHv7+/u7u7u7u7s7Ozs7Ozq6urq6uro6Ojn5+fn5+fl5eXl5eXj4+Pi4uLi4uLg4ODg4ODe3t7e3t7c3Nzb29vb29vZ2dnZ2dnX19fW1tbW1tbU1NTU1NTS0tLR0dHR0dHPz8/Nzc3Nzc3MzMzMzMzKysrJycnJycnHx8fHx8fFxcXExMTExMTCwsLBwcHBwcG/v7+/v7+9vb28vLy8vLy6urq5ubm5ubm3t7e2tra2tra0tLSysrKysrKxsbGxsbGvr6+urq6urq6srKyrq6urq6upqamoqKioqKimpqalpaWlpaWjo6OioqKioqKgoKCfn5+dnZ2dnZ2cnJybm5ubm5uZmZmYmJiYmJiWlpaVlZWTk5OTk5OSkpKRkZGRkZGPj4+Ojo6MjIyMjIyLi4uKioqKioqIiIiHh4eGhoaGhoaEhISDg4OBgYGBgYGAgIB/f39+fn5+fn58fHx7e3t6enp6enp4eHh3d3d2dnZ0dHR0dHRzc3NycnJxcXFvb29vb29ubm5tbW1sbGxqampqamppaWloaGhnZ2dmZmZkZGRkZGRjY2NiYmJhYWFgYGBeXl5dXV1dXV1cXFxbW1taWlpZWVlYWFhWVlZVVVVVVVVUVFRTU1NSUlJRUVFQUFBPT09OTk5NTU1MTExLS0tKSkpISEhHR0dGRkZFRUVERERDQ0NCQkIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMMjtSAAAAE3RSTlMAAAAAAAAAAAAAAAAAAAAAAABpUJ9ocQAAAAFiS0dEAIgFHUgAAAAGdEVYdFRpdGxlAKju0icAAAAHdEVYdEF1dGhvcgCprsxIAAAADHRFWHREZXNjcmlwdGlvbgATCSEjAAAACnRFWHRDb3B5cmlnaHQArA/MOgAAAAd0RVh0RS1tYWlsAH0Im9UAAAAEdEVYdFVSTAB4o9MPAAAB2UlEQVR42u3bwW0DMRBDUbYw/VfJDtxAEK9G5GhlcM8B9PIp2LGBoF74IKigggoqqKCCCiqooIIKKqiggvoFFP98nv2cC8UdFGdRvANVcyhybD8BSp8K+yZ9KgWKd6BqBkUO7idB8QyKnEylQfEOVPlR5Oh+IhTnUeRsKhWKd6DKiyKH95OhOIsip1PpULwDVT4UOb5fD1Xe/dAK9XSZpqqFenzcMKqcVx299bz7oRnKuh+aoayptCgeQ60dp0f9e7BvP3RDOfdDO5QxlRrFI6j147Sor4e69kM/lG+/LZTrXRkb69lSYSeU66pjJ5TrqhtQHEZ1j1OhpJ+iFlNhK5QpFfZCea66BcVBlPruraIWfjPDftgMZUmF3VCOVCYUh1BVY/thO5Rhv+eoxUeNogW1oLKheAeqdlDk6f18KCpR5PFURhTvQFUXRZ7fz4miCkW+IJUVxTtQ1UGRb9jPi6ICRb4ilRlFF6oePrqrDplJ+D2NEKX7rAWdSZdKiZKlOoCqFdS2SbafFKXaD19eOOtEKihDqVIdQdVTlMQk2k+M0ux3BlXPUCJTSf6AUaMkqSA2Sa66HKW46pC9mgtTQR1K8WVx/hMyqKCCCiqooIIKKqigggrqt1EfihpRJjZggFoAAAAASUVORK5CYII="

39
        ></img>

40
      </div>

41
    </div>

42
  );

43
}

44


45