feat: add public avatar thumbnail contract

src/components/shared/user-avatar-thumbnail.test.tsx

@@ -0,0 +1,24 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { UserAvatarThumbnail } from "./user-avatar-thumbnail";
+
+describe("UserAvatarThumbnail", () => {
+	it("renders the supplied figure as a fixed head-only thumbnail", () => {
+		const html = renderToStaticMarkup(
+			<UserAvatarThumbnail
+				figure="hd-180-1.hr-828-45"
+				alt="Life avatar"
+				options={{ direction: 3 }}
+			/>,
+		);
+
+		expect(html).toContain("figure=hd-180-1.hr-828-45");
+		expect(html).toContain("headonly=1");
+		expect(html).toContain("size=l");
+		expect(html).toContain("direction=3");
+		expect(html).toContain('width="40"');
+		expect(html).toContain('height="40"');
+		expect(html).toContain('alt="Life avatar"');
+		expect(html).toContain("shrink-0");
+	});
+});

src/components/shared/user-avatar-thumbnail.tsx

@@ -0,0 +1,27 @@
+import { AvatarImage } from "@/components/shared/avatar-image";
+import type { AvatarOptions } from "@/lib/imager";
+
+export interface UserAvatarThumbnailProps {
+	figure: string;
+	alt: string;
+	options?: Omit<AvatarOptions, "headOnly" | "size">;
+	className?: string;
+}
+
+export function UserAvatarThumbnail({
+	figure,
+	alt,
+	options,
+	className = "",
+}: UserAvatarThumbnailProps) {
+	return (
+		<AvatarImage
+			figure={figure}
+			options={{ ...options, headOnly: true, size: "l" }}
+			width={40}
+			height={40}
+			alt={alt}
+			className={`shrink-0 ${className}`.trim()}
+		/>
+	);
+}