📖 Descrição do Arquivo

O arquivo Avatar.jsx define três componentes principais para a exibição de avatares em uma aplicação. Utilizando o Radix UI, esses componentes são:

1. Avatar: O componente raiz que aplica estilos e estrutura ao avatar.
2. AvatarImage: Exibe a imagem do avatar.
3. AvatarFallback: Mostra um fallback (ícone ou texto) quando a imagem do avatar não está disponível.

Esses componentes são estilizados e têm uma estrutura que suporta tanto a imagem do avatar quanto um substituto caso a imagem falhe.

⚙️ Explicação do Código

1. Importações e Preparação

"use client"
 
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@/lib/utils"

• "use client": Esta diretiva garante que o código seja executado no lado do cliente (browser).
• AvatarPrimitive: Estamos importando os componentes de avatar do Radix UI, que oferecem uma maneira acessível e personalizável de renderizar avatares.
• cn: A função cn é utilizada para concatenar classes de forma dinâmica, permitindo personalizar o estilo dos componentes.

2. Componente Avatar

const Avatar = React.forwardRef(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props} />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

• Avatar: Este é o componente raiz do avatar. Ele utiliza o AvatarPrimitive.Root do Radix UI, que encapsula todo o comportamento necessário para o avatar.
  • Estilos: Aplicamos várias classes CSS para garantir que o avatar tenha um formato redondo (rounded-full), uma altura e largura fixas de h-10 w-10 e um comportamento de overflow para ocultar qualquer conteúdo fora da área do avatar.
  • forwardRef: Usado para passar uma referência ao componente para acesso direto.
  • Classe Condicional: A classe className pode ser adicionada para personalização.

3. Componente AvatarImage

const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props} />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

• AvatarImage: Este componente exibe a imagem do avatar. Usamos AvatarPrimitive.Image para definir a imagem do avatar e garantir que ela seja redimensionada adequadamente.
  • Estilos: A classe aspect-square garante que a imagem tenha uma proporção de 1:1 (quadrada), enquanto h-full w-full garante que a imagem ocupe toda a área do avatar.

4. Componente AvatarFallback

const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props} />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

• AvatarFallback: Este componente serve como substituto quando a imagem do avatar não está disponível (por exemplo, caso a imagem falhe ao carregar).
  • Estilos: Usamos flex para centralizar o conteúdo dentro do avatar. O bg-muted aplica um fundo cinza (pode ser personalizado). Ele também tem bordas arredondadas e ocupa toda a área do avatar.

🧑‍💻 Código Completo

"use client"
 
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@/lib/utils"
 
const Avatar = React.forwardRef(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props} />
))
Avatar.displayName = AvatarPrimitive.Root.displayName
 
const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props} />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props} />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
export { Avatar, AvatarImage, AvatarFallback }