Avatar

Overview

Avatar is a pretty useful component showing generally an image. In most case, dimensions are not too high, around 300px max. With AstroPine, you can use Avatar with a fallback text in case you only want to display text (initial name for instance).

Below are differents examples of this component.

Avatar with Image

Just pass an ImageType object to image props and you good to go. Just simply as that.

@shadcn

Copied !

---
import Avatar from "$components/avatar/Avatar.astro";

const image: ImageType = {
  src: "https://github.com/shadcn.png",
  alt: "@shadcn",
};
---

<div class="flex justify-center align-center p-6 rounded border bg-white">
  <Avatar {image} fallbackText="CN" />
</div>

Avatar with Text

The fallbackText props is here in case image don’t show nothing. It’s also useful to just showing text.

Be aware that your text length can break the main purpose display, i.e a full-rounded component.

CN
CN
CN
CN
CN
CN
CN
CN

Copied !

---
import Avatar from "$components/avatar/Avatar.astro";
---

<div
  class="flex justify-center align-center flex-wrap gap-3 p-6 rounded border bg-white"
>
  <Avatar fallbackText="CN" />
  <Avatar fallbackText="CN" color="primary" />
  <Avatar fallbackText="CN" color="secondary" />
  <Avatar fallbackText="CN" color="success" />
  <Avatar fallbackText="CN" color="danger" />
  <Avatar fallbackText="CN" color="info" />
  <Avatar fallbackText="CN" color="warning" />
  <Avatar
    fallbackText="CN"
    color={{ background: "bg-red-200", text: "text-indigo-500" }}
  />
</div>

Size Props Avatar

Size can be define. As said above, it’s not intended to display Avatar in a too big dimension. But it’s up to you.

Size value comes from SpecificTizeType. You can see all values in Specific Size page.

_P.S: Notice that only numeric (integer and float) values and size above or equal to 8 from size are considered.

@shadcn
@shadcn
@shadcn
CN
CN
CN
CN
CN
@shadcn
@shadcn
@shadcn
CN
@shadcn
@shadcn
CN
@shadcn
CN
@shadcn
@shadcn
@shadcn
@shadcn
CN
@shadcn
CN
@shadcn
CN
CN
@shadcn
@shadcn
@shadcn
@shadcn
@shadcn
@shadcn
@shadcn
CN
CN
CN
@shadcn
@shadcn
@shadcn
CN
@shadcn
CN
CN
CN
CN
@shadcn
CN
CN
CN
@shadcn
@shadcn
@shadcn
CN
CN
@shadcn
CN
CN
@shadcn
@shadcn
CN
CN
@shadcn
CN
CN
@shadcn
CN

Copied !

---
import { specificSizes } from "$common/types";
import Avatar from "$components/avatar/Avatar.astro";

const image: ImageType = {
  src: "https://github.com/shadcn.png",
  alt: "@shadcn",
};
---

<div
  class="flex flex-wrap justify-center items-center gap-3 align-center p-6 rounded border bg-white"
>
  {
    specificSizes.map((size) => {
      const props =
        Math.random() > 0.5
          ? { image, fallbackText: "CN", size }
          : { fallbackText: "CN", size };
      return <Avatar {...props} />;
    })
  }
</div>