👥 CollaboratorInfo - Informações do Colaborador
O componente CollaboratorInfo exibe a foto e o nome do colaborador, permitindo uma representação visual rápida.
🛠 Estrutura do Componente
Primeiro, importamos os pacotes necessários:
import React from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";Avatar,AvatarImageeAvatarFallback🖼 → Exibe a foto do colaborador ou, caso não haja uma, as iniciais do nome.Button🔗 → Mostra o nome do colaborador como um link estilizado.
📌 Renderizando o Colaborador
O componente recebe um objeto collaborator como propriedade (prop), contendo os seguintes dados:
photo→ URL da imagem do colaborador.initials→ Letras iniciais do nome, usadas caso não haja foto.full_name→ Nome completo, exibido como um botão/link.
Agora, renderizamos o componente:
const CollaboratorInfo = ({ collaborator }) => {
return (
<>
{/* 📸 Exibe o Avatar do Colaborador */}
<Avatar>
<AvatarImage src={collaborator.photo} />
<AvatarFallback>{collaborator.initials}</AvatarFallback>
</Avatar>
{/* 🔗 Nome do Colaborador como botão/link */}
<Button variant="link" className="ml-0 px-2">
@{collaborator.full_name}
</Button>
</>
);
};- Se a
photoexistir, exibimos a imagem (AvatarImage). - Caso contrário, usamos
AvatarFallbackpara mostrar as iniciais. - O nome do colaborador aparece como um botão estilizado (
Button).
📌 Código Completo
import React from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
const CollaboratorInfo = ({ collaborator }) => {
return (
<>
<Avatar>
<AvatarImage src={collaborator.photo} />
<AvatarFallback>{collaborator.initials}</AvatarFallback>
</Avatar>
<Button variant="link" className="ml-0 px-2">
@{collaborator.full_name}
</Button>
</>
);
};
export default CollaboratorInfo;