Avatar

import { Box, Flex } from "@seed-design/react";
import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

export default function AvatarPreview() {
  return (
    <Flex gap="x4">
      <Avatar
        size="80"
        badgeMask="circle"
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      >
        <AvatarBadge>
          <Box borderRadius="full" bg="palette.green600" width="x6" height="x6" />
        </AvatarBadge>
      </Avatar>
      <Avatar size="80" src={undefined} fallback={<IdentityPlaceholder />} />
    </Flex>
  );
}

import { Flex } from "@seed-design/react";
import { Avatar } from "seed-design/ui/avatar";

export default function AvatarSize() {
  return (
    <Flex gap="x4">
      <Avatar size="20" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      <Avatar size="24" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      <Avatar size="36" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      <Avatar size="48" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      <Avatar size="64" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      <Avatar size="80" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      <Avatar size="96" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      <Avatar size="108" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
    </Flex>
  );
}

import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
import { Box, HStack } from "@seed-design/react";

export default function() {
  return (
    <HStack gap="x4">
      <Avatar
        size="64"
        badgeMask="circle"
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      >
        <AvatarBadge asChild>
          <Box bg="palette.green600" borderRadius="full" />
        </AvatarBadge>
      </Avatar>
      <Avatar
        size="64"
        badgeMask="flower"
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      >
        <AvatarBadge asChild>
          <img
            src="/flower_green_checkmark.svg"
            alt="뱃지를 설명하는 대체 텍스트를 제공해야 합니다."
          />
        </AvatarBadge>
      </Avatar>
      <Avatar
        size="64"
        badgeMask="shield"
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      >
        <AvatarBadge asChild>
          <img
            src="/shield_blue_checkmark.svg"
            alt="뱃지를 설명하는 대체 텍스트를 제공해야 합니다."
          />
        </AvatarBadge>
      </Avatar>
    </HStack>
  );
}

import { Avatar, AvatarStack } from "seed-design/ui/avatar";
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

export default function AvatarStackExample() {
  return (
    <AvatarStack size="64">
      <Avatar
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      />
      <Avatar
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      />
      <Avatar
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      />
      <Avatar
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      />
    </AvatarStack>
  );
}