Avatar

Overview

Avatar is a pretty useful component showing generally an image. In most case, dimensions are not too high, around 300px max.

With JSXPine, 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.

Installation

Notes

To use this component, you need to initialize your project first. If not done yet, run one of the following command:

npx jsxpine init or yarn jsxpine init or pnpm jsxpine init or bunx jsxpine init.

Go to the installation and usage page to learn more.

jsxpine add avatar

Copied !


	--------------------     Avatar Component   -------------------------

		import clsx from "clsx";
import { Image } from "./image.component";

/**
 * @typedef {"6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96"} AvatarSize
 */

/**
 * @typedef AvatarProps
 * @type {{ image?: import("./image.component").ImageType, fallbackText?: string, color?: import("../common/types").ThemeColorType | { background: string, text: string }, size?: AvatarSize} & import("../common/props").HTMLTag}
 */

/**
 * Avatar component props
 * @type {import("../common/props").JSXComponent<AvatarProps>}
 */
export function Avatar(props) {
	const { color, image, fallbackText, size = "8" } = props;

	/** @type {Map<import("../common/types").ThemeColorType, { background: string; text: string }>} */
	const colorMap = new Map([
		[
			"primary",
			{
				background: "bg-primary-light border-primary",
				text: "text-primary-dark"
			}
		],
		[
			"secondary",
			{ background: "bg-secondary-light border-secondary", text: "text-secondary" }
		],
		[
			"success",
			{
				background: "bg-success-light border-success",
				text: "text-success-dark"
			}
		],
		[
			"danger",
			{ background: "bg-danger-light border-danger", text: "text-danger-dark" }
		],
		[
			"info",
			{ background: "bg-info-light border-info", text: "text-info-dark" }
		],
		[
			"warning",
			{
				background: "bg-warning-light border-warning",
				text: "text-warning-dark"
			}
		]
	]);

	const backgroundColor =
		typeof color === "string"
			? colorMap.get(color)?.background
			: color?.background ?? "bg-base-light border-base-dark";
	const textColor =
		typeof color === "string"
			? colorMap.get(color)?.text
			: color?.text ?? "text-base-dark";

	/** @type {Map<AvatarSize, string>} */
	const fontSizeMap = new Map([
		["6", "text-xs"],
		["7", "text-sm"],
		["8", "text-sm"],
		["9", "text-md"],
		["10", "text-md"],
		["11", "text-lg"],
		["12", "text-lg"],
		["14", "text-xl"],
		["16", "text-xl"],
		["20", "text-2xl"],
		["24", "text-2xl"],
		["28", "text-4xl"],
		["32", "text-4xl"],
		["36", "text-5xl"],
		["40", "text-5xl"],
		["44", "text-6xl"],
		["48", "text-6xl"],
		["52", "text-7xl"],
		["56", "text-7xl"],
		["60", "text-8xl"],
		["64", "text-8xl"],
		["72", "text-9xl"],
		["80", "text-9xl"],
		["96", "text-[12rem]"]
	]);

	return (
		<div
			class={clsx(
				"flex items-center justify-center rounded-full overflow-hidden border max-w-xl aspect-square",
				`size-${size}`,
				backgroundColor
			)}
		>
			{image ? (
				<Image src={image.src} alt={image.alt} class={"object-contain object-center w-full h-full"} />
			) : (
				<span class={clsx(textColor, fontSizeMap.get(size))} safe>
					{fallbackText}
				</span>
			)}
		</div>
	);
}

Avatar with Image

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

Copied !

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

export function ImageAvatarExample() {
	/**
	 * @type {import("$components/image.component").ImageType}
	 */
	const image = {
		src: "https://i.imgur.com/LDOO4Qs.jpg",
		alt: "avatar-image"
	};
	return (
		<div class="flex justify-center p-6 rounded border bg-white">
			<Avatar image={image} fallbackText="CN" size="20" />
		</div>
	);
}

Avatar with Text

The fallbackText props is here in case image doesn'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. So, fallbackText is usually two or three characters.

Copied !

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

export function FallbackTextAvatarExample() {
	return (
		<div class="flex justify-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 defined. As said above, it's not intended to display Avatar component in a too big dimension. But it's up to you.

JSX

Copied !

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

export function SizeAvatarExample() {
	/**
	 * @type {import("$components/image.component").ImageType}
	 */
	const image = {
		src: "https://i.imgur.com/yhW6Yw1.jpg",
		alt: "avatar-size"
	};
	const sizes = ["6", "7", "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32", "36", "40", "44", "48", "52", "56", "60", "64", "72", "80", "96"
	];

	return (
		<div class="flex flex-wrap justify-center items-center gap-3 p-6 rounded border bg-white">
			{sizes.map((size) => {
				const props =
					Math.random() > 0.5
						? {
								image,
								fallbackText: "CN",
								size: /** @type {import("$components/avatar.component").AvatarSize} */ (
									size
								)
						  }
						: {
								fallbackText: "JSX",
								size: /** @type {import("$components/avatar.component").AvatarSize} */ (
									size
								)
						  };
				return <Avatar {...props} />;
			})}
		</div>
	);
}

Notes

Notice that only numeric values betwween 6 and 96 are considered. See the properties section to learn more.