Avatar Social Proof

import { AvatarSocialProof } from "@/components/ui/avatar-social-proof";

export const DEMO_PEOPLE = {
  gagandeepKang: "Gagandeep Kang",
  janakiAmmal: "Janaki Ammal",
  kalpanaChawla: "Kalpana Chawla",
  rajReddy: "Raj Reddy",
  srinivasaRamanujan: "Srinivasa Ramanujan",
  vikramSarabhai: "Vikram Sarabhai",
} as const;

const WHITESPACE_PATTERN = /\s+/;

export const getFirstName = (name: string): string =>
  name.trim().split(WHITESPACE_PATTERN)[0] ?? name;

const BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;

const DEVELOPERS = [
	{
		id: "janaki",
		name: getFirstName(DEMO_PEOPLE.janakiAmmal),
		palette: BLUE_PALETTE,
	},
	{
		id: "vikram",
		name: getFirstName(DEMO_PEOPLE.vikramSarabhai),
		palette: ["#fff0e2", "#fa9769"],
	},
	{
		id: "kalpana",
		name: getFirstName(DEMO_PEOPLE.kalpanaChawla),
		palette: ["#e7fbe8", "#9ce786"],
	},
	{
		id: "srinivasa",
		name: getFirstName(DEMO_PEOPLE.srinivasaRamanujan),
		palette: ["#f4e7ff", "#c994ec"],
	},
] as const;

export function AvatarSocialProofExample() {
	return (
		<div className="flex flex-col items-center gap-4">
			<AvatarSocialProof avatars={DEVELOPERS}>
				Joined by <strong className="text-foreground">500+</strong> developers.
			</AvatarSocialProof>
			<AvatarSocialProof avatars={DEVELOPERS.slice(0, 3)} variant="default">
				Trusted by <strong className="text-foreground">100K+</strong> users.
			</AvatarSocialProof>
		</div>
	);
}

export default AvatarSocialProofExample;