guilherme
/
agretrospectivaweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: alterar idioma do HTML para pt-br e refatorar o componente ProfileCard para melhorar a apresentação das métricas

main
guilherme 2025-12-11 12:17:29 -03:00
parent 01554466e4
commit bc041b8a56
3 changed files with 12 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />

11
src/views/components/ProfileCard.css
View File

@ -379,7 +379,6 @@
.pc-details p {
font-weight: 600;
position: relative;
top: -12px;
white-space: nowrap;
font-size: 16px;
margin: 0 auto;
@ -601,8 +600,12 @@
}
.metric-content {
flex: 1;
min-width: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
border-radius: 0px;
}
.metric-value {
@ -612,8 +615,6 @@
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 4px;
}
.metric-label {

105
src/views/components/ProfileCard.jsx
View File

@ -381,110 +381,15 @@ const ProfileCardComponent = ({
</div>
</div>
<div className="metric-card-wide bg-gradient-to-br from-indigo-900/30 to-purple-900/30">
<div className="metric-content-wide">
<div className="flex items-center gap-2">
<span className="top-badge">TOP 1</span>
<h4 className="metric-app-name">{topAppName || '—'}</h4>
</div>
<p className="metric-app-desc">
{topAppAcessos != null
? `${topAppAcessos.toLocaleString('pt-BR')} acessos`
: 'Aplicação mais utilizada'}
</p>
<div className="metric-card bg-gradient-to-br from-blue-900/30 to-cyan-900/30">
<div className="metric-content">
<h4 className="metric-value">{topAppName || '—'}</h4>
<p className="metric-label">Aplicação mais utilizada</p>
</div>
</div>
{/* Botões de compartilhamento */}
{showShareButtons && (
<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
<button
className="btn-primary"
onClick={async () => {
if (navigator.share) {
try {
setSharing(true);
await navigator.share({
title: `Retrospectiva Ágape - ${name}`,
text: `${name} — ${title}\nAcessos: ${
totalAcessos != null
? totalAcessos.toLocaleString('pt-BR')
: '—'
}`,
url: window.location.href,
});
} catch (err) {
console.error(err);
} finally {
setSharing(false);
}
} else {
const text = encodeURIComponent(
`${name} — ${title} | Acessos: ${
totalAcessos != null ? totalAcessos : ''
}`,
);
const url = encodeURIComponent(
window.location.href,
);
window.open(
`https://twitter.com/intent/tweet?text=${text}&url=${url}`,
'_blank',
);
}
}}>
{sharing ? 'Compartilhando...' : 'Compartilhar'}
</button>
<button
className="btn-secondary"
onClick={() => {
const text = encodeURIComponent(
`${name} — ${title} | Acessos: ${
totalAcessos != null ? totalAcessos : ''
}`,
);
const url = encodeURIComponent(window.location.href);
window.open(
`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${text}`,
'_blank',
);
}}>
Facebook
</button>
<button
className="btn-secondary"
onClick={async () => {
try {
const wrap = wrapRef.current;
if (!wrap) return;
const html2canvas = (await import('html2canvas'))
.default;
const canvas = await html2canvas(wrap, {
backgroundColor: null,
scale: 2,
});
const dataUrl = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = dataUrl;
a.download = `retrospectiva-${
handle || 'usuario'
}.png`;
document.body.appendChild(a);
a.click();
a.remove();
} catch (err) {
console.error('Erro ao gerar imagem', err);
alert(
'Não foi possível gerar a imagem. Por favor atualize a página e tente novamente.',
);
}
}}>
Download PNG
</button>
</div>
)}
</div>
</div>
</div>