feat(payers): upload de avatar via arquivo com redimensionamento client-side

- círculo de upload no final da grade de avatares abre seletor de arquivo
- imagem redimensionada para 200×200px via Canvas e salva como base64
- suporte a data URLs em next/image com prop unoptimized
- object-cover adicionado ao componente base Avatar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-04-11 22:43:28 +00:00
parent fa41c78a39
commit 9b8ac9f71f
7 changed files with 138 additions and 18 deletions

View File

@@ -24,6 +24,7 @@ interface PayerCardProps {
export function PayerCard({ payer, onEdit, onRemove }: PayerCardProps) {
const avatarSrc = getAvatarSrc(payer.avatarUrl);
const isAdmin = payer.role === PAYER_ROLE_ADMIN;
const isDataUrl = avatarSrc.startsWith("data:");
const isReadOnly = !payer.canEdit;
return (
@@ -33,6 +34,7 @@ export function PayerCard({ payer, onEdit, onRemove }: PayerCardProps) {
<div className="relative mb-3 flex size-16 items-center justify-center overflow-hidden rounded-full border-background bg-background shadow-lg">
<Image
src={avatarSrc}
unoptimized={isDataUrl}
alt={`Avatar de ${payer.name}`}
width={80}
height={80}