Avatar 头像组件 #

import { Avatar } from '@chakra-ui/react'

function Example() {
  return <Avatar src="https://bit.ly/dan-abramov" name="Dan Abramov" />
}

<Avatar size="xs" name="用户" />
<Avatar size="sm" name="用户" />
<Avatar size="md" name="用户" />
<Avatar size="lg" name="用户" />
<Avatar size="xl" name="用户" />
<Avatar size="2xl" name="用户" />

import { AvatarGroup } from '@chakra-ui/react'

<AvatarGroup size="md" max={2}>
  <Avatar name="Ryan Florence" src="https://bit.ly/ryan-florence" />
  <Avatar name="Segun Adebayo" src="https://bit.ly/sage-adebayo" />
  <Avatar name="Kent Dodds" src="https://bit.ly/kent-c-dodds" />
  <Avatar name="Prosper Otemuyiwa" src="https://bit.ly/prosper-baba" />
</AvatarGroup>

<Avatar src="https://bit.ly/dan-abramov">
  <AvatarBadge boxSize="1.25em" bg="green.500" />
</Avatar>

<Avatar src="invalid-url" name="Dan Abramov" />

<Avatar
  name="Dan Abramov"
  bg="blue.500"
  color="white"
  borderRadius="md"
/>

function UserProfile({ user }) {
  return (
    <HStack spacing={4}>
      <Avatar src={user.avatar} name={user.name} size="lg">
        <AvatarBadge boxSize="1em" bg={user.online ? 'green.500' : 'gray.400'} />
      </Avatar>
      <Box>
        <Text fontWeight="bold">{user.name}</Text>
        <Text color="gray.500" fontSize="sm">{user.email}</Text>
      </Box>
    </HStack>
  )
}

function Comment({ comment }) {
  return (
    <HStack align="start" spacing={3}>
      <Avatar src={comment.user.avatar} name={comment.user.name} size="sm" />
      <Box>
        <HStack>
          <Text fontWeight="bold" fontSize="sm">{comment.user.name}</Text>
          <Text color="gray.500" fontSize="xs">{comment.time}</Text>
        </HStack>
        <Text fontSize="sm">{comment.content}</Text>
      </Box>
    </HStack>
  )
}