Avatar

import { Avatar } from '@vapor-ui/core';

import { GOORM_FAVICON_URL } from '~/constants/image-urls';

export default function DefaultAvatar() {
    return <Avatar.Root size="md" alt="goorm" src={GOORM_FAVICON_URL} />;
}

import { Avatar } from '@vapor-ui/core';

export default function AvatarSize() {
    return (
        <div className="flex flex-wrap items-center gap-4">
            <Avatar.Root
                size="sm"
                alt="SM"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
            <Avatar.Root
                size="md"
                alt="MD"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
            <Avatar.Root
                size="lg"
                alt="LG"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
            <Avatar.Root
                size="xl"
                alt="XL"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
        </div>
    );
}

import { Avatar } from '@vapor-ui/core';

export default function AvatarShape() {
    return (
        <div className="flex flex-wrap items-center gap-4">
            <Avatar.Root
                size="lg"
                shape="circle"
                alt="Circle Avatar"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
            <Avatar.Root
                size="lg"
                shape="square"
                alt="Square Avatar"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
        </div>
    );
}

import { Avatar } from '@vapor-ui/core';

export default function Flexible() {
    return (
        <div className="flex gap-4">
            <Avatar.Root
                size="md"
                alt="UI"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            >
                <Avatar.FallbackPrimitive>UI</Avatar.FallbackPrimitive>
                <Avatar.ImagePrimitive />
            </Avatar.Root>
            <Avatar.Root size="md" alt="Core" src="/invalid-image.jpg">
                <Avatar.FallbackPrimitive>VC</Avatar.FallbackPrimitive>
                <Avatar.ImagePrimitive />
            </Avatar.Root>
            <Avatar.Root size="md" alt="Design">
                <Avatar.FallbackPrimitive>VD</Avatar.FallbackPrimitive>
                <Avatar.ImagePrimitive />
            </Avatar.Root>
        </div>
    );
}

import { Avatar } from '@vapor-ui/core';

export default function AvatarFallbackOnly() {
    return (
        <div className="flex gap-4">
            <Avatar.Root size="md" alt="Vapor Library">
                <Avatar.FallbackPrimitive />
            </Avatar.Root>
            <Avatar.Root size="md" alt="Vapor tokens">
                <Avatar.FallbackPrimitive>VT</Avatar.FallbackPrimitive>
            </Avatar.Root>
            <Avatar.Root size="md" alt="Vapor Delay" delay={600}>
                <Avatar.FallbackPrimitive>VD</Avatar.FallbackPrimitive>
            </Avatar.Root>
        </div>
    );
}