Avatar

import { Avatar } from '@peppermint-design/devreadykit';

export default function App() {
  return (
    <div className="flex items-center gap-4">
        <Avatar
            src="https://i.pravatar.cc/100?img=48"
            alt="John Doe"
            name="John Doe"
            size="xs"
        />
        <Avatar
            src="https://i.pravatar.cc/100?img=32"
            alt="Jane Smith"
            name="Jane Smith"
            size="sm"
        />
        <Avatar
            src="https://i.pravatar.cc/100?img=12"
            alt="Jane Smith"
            name="Jane Smith"
            size="md"
        />
        <Avatar
            src="https://i.pravatar.cc/100?img=18"
            alt="Jane Smith"
            name="Jane Smith"
            size="lg"
        />
    </div>
  );
}

import Avatar from "@peppermint-design/devreadykit";

export default function AvatarImageFallback() {
    return (
        <div className="flex items-center gap-4">
            <Avatar
                src="https://example.com/missing-image.jpg"
                alt="Missing Image"
                name="John Doe"
            />
        </div>
    );
}

import Avatar from "@peppermint-design/devreadykit";

export default function AvatarInitials() {
    return (
        <div className="flex items-center gap-4">
            <Avatar name="John Doe" size="xs" />
            <Avatar name="Jane Smith" size="sm" />
            <Avatar initials="AB" size="md" />
        </div>
    );
}

import Avatar from "@peppermint-design/devreadykit";
import { User } from "@/assets/icons/user";

export default function AvatarIconExamples() {
    return (
        <div className="flex items-center gap-4">
            <Avatar size="xs" icon={<User />} />
            <Avatar size="sm" icon={<User />} />
            <Avatar size="md" icon={<User />} />
            <Avatar size="lg" icon={<User />} />
        </div>
    );
}

<Avatar name="John Doe" size="xs" />
<Avatar name="John Doe" size="sm" />
<Avatar name="John Doe" size="md" />
<Avatar name="John Doe" size="lg" />

import Avatar from "@peppermint-design/devreadykit";

export default function AvatarStatusBadges() {
    return (
        <div className="flex items-center gap-6">
            <Avatar
                name="John Doe"
                size="xs"
                showBadge
                badgeVariant="dot"
            />
            <Avatar
                name="Jane Smith"
                size="sm"
                showBadge
                badgeVariant="icon"
            />
            <Avatar
                name="Jane Smith"
                size="md"
                showBadge
                badgeVariant="icon"
            />
            <Avatar
                name="Jane Smith"
                size="lg"
                showBadge
                badgeVariant="icon"
            />
        </div>
    );
}

import Avatar from "@peppermint-design/devreadykit";

const users = [
    {
        id: 1,
        name: "John Doe",
        avatar: "https://i.pravatar.cc/100?img=12",
        isOnline: true,
    },
    {
        id: 2,
        name: "Jane Smith",
        avatar: "https://i.pravatar.cc/100?img=18",
        isOnline: false,
    },
    {
        id: 3,
        name: "Alex Johnson",
        avatar: "https://i.pravatar.cc/100?img=28",
        isOnline: true,
    },
];

export default function AvatarUserListExample() {
    return (
        <div className="space-y-3">
            {users.map((user) => (
                <div key={user.id} className="flex items-center gap-3">
                    <Avatar
                        src={user.avatar}
                        name={user.name}
                        size="md"
                        showBadge={user.isOnline}
                    />
                    <span className="text-sm text-neutral-700">{user.name}</span>
                </div>
            ))}
        </div>
    );
}

import Avatar from "@peppermint-design/devreadykit";

const members = [
    { id: 1, name: "John", avatar: "https://i.pravatar.cc/100?img=15" },
    { id: 2, name: "Jane", avatar: "https://i.pravatar.cc/100?img=47" },
    { id: 3, name: "Alex", avatar: "https://i.pravatar.cc/100?img=20" },
    { id: 4, name: "Maria", avatar: "https://i.pravatar.cc/100?img=33" },
    { id: 5, name: "Chris", avatar: "https://i.pravatar.cc/100?img=7" },
    { id: 6, name: "Taylor", avatar: "https://i.pravatar.cc/100?img=52" },
];

export default function AvatarTeamMembersExample() {
    return (
        <div className="flex items-center">
            {members.slice(0, 5).map((member, index) => (
                <Avatar
                    key={member.id}
                    src={member.avatar}
                    name={member.name}
                    size="sm"
                    className="border-2 border-white -ml-2 first:ml-0"
                    style={{ zIndex: members.length - index }}
                />
            ))}
            {members.length > 5 && (
                <div className="ml-2 flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-neutral-600">
                    +{members.length - 5}
                </div>
            )}
        </div>
    );
}