Avatar

Find the source code here.

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.component";

export function ImageAvatarExample() {
	/**
	 * @type {import("$components/image.component").ImageType}
	 */
	const image = {
		src: "https://github.com/shadcn.png",
		alt: "@shadcn"
	};
	return (
		<div class="flex justify-center align-center p-6 rounded border bg-white">
			<Avatar image={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.component";

export function FallbackTextAvatarExample() {
	return (
		<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 inSpecific 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
CN
@shadcn
CN
CN
CN
CN
CN
@shadcn
@shadcn
@shadcn
CN
@shadcn
@shadcn
CN
CN
@shadcn
@shadcn
CN
@shadcn
CN
CN
@shadcn
@shadcn
CN
@shadcn
CN
@shadcn
CN
CN
CN
CN
@shadcn
CN
CN
@shadcn
CN
@shadcn
CN
CN
@shadcn
CN
CN
@shadcn
CN
@shadcn
CN
CN
@shadcn
@shadcn
CN
@shadcn
@shadcn
@shadcn
CN
@shadcn
CN
@shadcn
CN
@shadcn
CN
CN
@shadcn
@shadcn
CN
@shadcn
@shadcn
@shadcn
@shadcn

Copied !

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

export function SizeAvatarExample() {
	/**
	 * @type {import("$components/image.component").ImageType}
	 */
	const image = {
		src: "https://github.com/shadcn.png",
		alt: "@shadcn"
	};
	return (
		<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>
	);
}