feat: alterar idioma do HTML para pt-br e refatorar o componente ProfileCard para melhorar a apresentação das métricas
parent
01554466e4
commit
bc041b8a56
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="pt-br">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
|
|
||||||
|
|
@ -379,7 +379,6 @@
|
||||||
.pc-details p {
|
.pc-details p {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -12px;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -601,8 +600,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-content {
|
.metric-content {
|
||||||
flex: 1;
|
display: flex;
|
||||||
min-width: 0;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-value {
|
.metric-value {
|
||||||
|
|
@ -612,8 +615,6 @@
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
line-height: 1;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-label {
|
.metric-label {
|
||||||
|
|
|
||||||
|
|
@ -381,110 +381,15 @@ const ProfileCardComponent = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="metric-card-wide bg-gradient-to-br from-indigo-900/30 to-purple-900/30">
|
<div className="metric-card bg-gradient-to-br from-blue-900/30 to-cyan-900/30">
|
||||||
<div className="metric-content-wide">
|
<div className="metric-content">
|
||||||
<div className="flex items-center gap-2">
|
<h4 className="metric-value">{topAppName || '—'}</h4>
|
||||||
<span className="top-badge">TOP 1</span>
|
<p className="metric-label">Aplicação mais utilizada</p>
|
||||||
<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>
|
</div>
|
||||||
</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}"e=${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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue